CSS 的出现， 实现了网页的结构和样式分离。美容师！
CSS 规则由两个主要的部分构成： 选择器， 以及一条或多条声明
CSS 规则由两个主要的部分构成： 选择器， 以及一条或多条声明
以内嵌式样式表为例
vs code快捷键： ctrl+/
CSS的英文可以大写，也可以小写
建议全部小写！
颜色名就是使用颜色的英文单词进行表示
更多的颜色名可以通过查询手册得到
颜色值指使用具体颜色的数值表示。 包括： rgb 模式和十六进制模式写法
常用颜色的 rgb 色值：
常用颜色的十六进制色值：
注： 十六进制颜色值简写模式： 如果红、 绿、 蓝三个原色的色值每一个都是由重叠的数字组成， 可以将重叠的数字简化成一个进行书写。 如： 红色 #f00
如果不设置字体属性， 不同的浏览器有自己的默认字体
首选字体需要根据设计图确定， 最后需要设置备用字体
缺点： id 选择器只能实现单选， 不能帮我们完成多选的功能
原子类： 在css中提前设置一些类名， 每个类选择器后面只添加一条css样式属性， 这些属性会在页面中常被使用， 后期可以不需要多次书写属性， 只要将对应的类名添加给需要的标签即可
实际工作中， 通常我们有一个使用规律： 类上样式(CSS)， id 上行为(JavaScript)
优点： 减少 class 属性的使用， 选择效率更高
继承性是一个很好的性质， 可以将页面中出现最多的文字样式设置给一个较大的祖先级标签比如 <body>， 后期所有的后代标签都可以从 <body>进行继承
转： https://blog.csdn.net/Number7421/article/details/81002729
不过我以前都写过这三种方法了，很pang额，怕之后忘记了，偷个懒拿别人的，以免以后忘记了
一、单选：
思路：当点击的索引值 == v-for循环的索引值时，给你那个li添加选中样式
html：
CSS样式如下：
js
最后的效果如图所示
二、多选
方法一和方法二的主要的区别在于数据中有没已有标注是选中状态还是未选中状态
CSS样式如下：
方法一：
思路：新增一个新的空数组arr（arr的里元素的索引值表示，表示该索引值对应的li已经处于被选中状态），如果arr数组没有点击的索引值，就添加到arr数组里，如果有就把这个索引，就把这个索引从数组中删除。
html：
js
方法二：
思路：这个就更加通俗易懂了，把点击的那个是否选中的标志取反就可以了
html：
js
效果如图所示
jquery 获取select多选下拉框所有选项的值可以如下实现var all = ""
$("select option").each(function() {
all += $(this).attr("value")+" "
})
而值获取被选中的值可用如下代码实现
$("select").val()
下面给出实例代码：
创建Html元素：一个多选列表和一个按钮
<select id="multi-sel" multiple="multiple">
<option value="1">萝卜，我的value是1</option>
<option value="2">青菜，我的value是2</option>
<option value="3">小葱，我的value是3</option>
<option value="4">豆腐，我的value是4</option>
</select>
<input type="button" value="点击显示选择的项目">
简单设置一下css样式
select{width:200pxheight:150pxpadding:10pxborder:4px dashed #ccc}
select option{margin:5px}
input[type='button']{width:200pxheight:35pxmargin:10pxborder:2px dashed #ebbcbe}
编写jquery代码：实现获取所有值和获取选中值
$(function(){
$("input:button").click(function() {
var all = ""
$("select option").each(function() {
all += $(this).attr("value")+" "
})
var sel = $("select").val()
alert("多选列表所有的value值:"+all+"，其中被选中的是:"+sel+"。")
})
})
观察效果
