一.class 和 id 的使用场景?
- name：指定标签的名称
应用场景：
①form表单：name可作为传递给服务器表单列表的变量名；如传到服务器的名称为：username="name值"。
②input type="radio"单选标签：把几个单选标签的 name设为一个相同值时，将会进行单选操作。
<input type="radio" name="sex"/>男
<input type="radio" name="sex"/>女
③快速获取一组name相同的标签：获取拥有相同name的标签，一起进行操作，如:更改属性、注册事件等。
function changtxtcolor() {
var txts = document.getElementsByName('txtcolor'); //获取所有name=txtcolor 的标签
for (var i = 0; i < txts.length; i++) { //循环遍历标签，并把背景色改为red
txts[i].style.backgroundColor = "red";
}
} - id：指定标签的唯一标识
应用场景：
①根据提供的唯一id号，快速获取标签对象。如：document.getElementById("id值")
②用于充当label标签for属性的值：示例：<label for='userid'>用户名：</label>，表示单击此label标签时，id为userId的标签获得焦点。
二.CSS选择器常见的有几种?
基础选择器
* 通用元素选择器，匹配页面任何元素
#id id选择器，匹配特定id的元素
.class 类选择器，匹配class包含特定类的元素
element 标签选择器
组合选择器
E,F 多元素选择器，同时匹配元素E和F
E F 后代选择器，空格分割，匹配E元素所有的后代（不只是子元素，而且包括子元素向下递归）元素F
E>F 子元素选择器，匹配E元素的直接子元素F（不递归）
E+F 直接相邻选择器，匹配E元素之后的相邻的同级元素F
E~F 普通相邻选择器，匹配E元素之后的同级元素F（无论是否直接相邻）
属性选择器
E[attr] 用于选取带有指定属性的元素
E[attr=value] 用于选取带有指定属性和值的元素
E[attribute~=value] 用于选取属性值中包含指定词汇的元素
E[attribute|=value] 用于选取带有以指定值开头的属性值的元素，该值必须是整个单词
E[attribute^=value] 匹配属性值以指定值开头的每个元素
E[attribute$=value] 匹配属性值以指定值结尾的每个元素
E[attribute*=value] 匹配属性值中包含指定值的每个元素。
伪类选择器
E:first-child 匹配元素E的第一个子元素
E:nth-last-child 匹配其父元素的第n个子元素，第一个编号为1
E:nth-of-type(n) 与:nth-child作用类似，但是仅匹配使用同种标签的元素
E:nth-last-of-type(n) 与 nth-last-child作用相似，但是仅匹配使用同种标签的元素
E:first-child 匹配父元素的第一个子元素
E:last-child 匹配父元素的最后一个子元素
E:active 匹配鼠标已经在其上按下，但是还没有释放的E元素
E:hover 匹配鼠标悬停其上的E元素
伪元素选择器
E::before 在E元素之前插入生成的内容，配合content来输入要插入的内容
E::after 在E元素之后插入生成的内容
三.选择器的优先级是怎样的?对于复杂场景如何计算优先级？
当两个规则都作用到了同一个html元素上时，如果定义的属性有冲突，那么应该用谁的值的，CSS有一套优先级的定义。
不同级别
1.在属性后面使用 !important 会覆盖页面内任何位置定义的元素样式。
2.作为style属性写在元素内的样式
3.id选择器
4.类选择器
5.标签选择器
6.通配符选择器
7.浏览器自定义或继承
总结排序：!important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性
同一级别
同一级别中后写的会覆盖先写的样式。
复杂场景计算优先级
CSS的选择器是有权重的，当不同选择器的样式设置有冲突时，会采用权重高的选择器设置样式。权重（即优先级）的规则如下，权重越高，优先级越高：
同一个元素可以使用多个规则来指定它的同一样式（比如字体颜色），每个规则都有自己的选择器。显然最终只有一个规则起作用（不可能一个字既是红色又是绿色），那么该规则的特殊性最高，特殊性即css优先级。很多人仅仅知道选择器优先级：ID>class>元素选择器，而不知道ID的优先级为什么大于class的优先级。那么css优先级到底是怎么计算的呢？
选择器的特殊性值表述为4个部分，用0,0,0,0表示：
行间样式，加1,0,0,0.
ID选择器的特殊性值，加0,1,0,0。
类选择器、属性选择器或伪类，加0,0,1,0。
元素和伪元素，加0,0,0,1。
通配选择器*对特殊性没有贡献，即0,0,0,0。
最后比较特殊的一个标志!important（权重），它没有特殊性值，但它的优先级是最高的，为了方便记忆，可以认为它的特殊性值为1,0,0,0,0。
选择器特殊性值是从左向右排序的，特殊性值1,0,0,0大于以0开头的所有特殊性值，即便它是0,99,99,99，优先级依然比1,0,0,0要低。
四.a:link, a:hover, a:active, a:visited 的顺序是怎样的？ 为什么？
很多人都知道a标签有四种状态：链接访问前、链接访问后、鼠标滑过、激活，分别对应四种伪类:link、:visited、:hover、:active，并且这四个伪类如果对同一个元素设置同一个属性，那它们的声明顺序还有一定要求，一般大家都遵循“爱恨原则LVHA”（LoVe HAte），为什么是这个顺序？不能是其它顺序吗？
根据css优先级计算规则，伪类的特殊性值是0,0,1,0，4个伪类的特殊性值相同，那么后面声明的规则优先级高。当鼠标滑过a链接时，满足:link和:hover两个伪类，要改变a标签的颜色，就必须将:hover伪类在:link伪类后面声明；同理，当鼠标点击激活a链接时，同时满足:link、:hover、:active三种状态，要显示a标签激活时的样式（:active），必须将:active声明放到:link和:hover之后。因此得出LVHA这个顺序。这个顺序能不能变？可以，但也只有:link和:visited可以交换位置，因为一个链接要么访问过要么没访问过，不可能同时满足，也就不存在覆盖的问题。
五.以下选择器分别是什么意思?
#header { } //id为"header"的元素
.header //类名为"header"的元素
.header .logo { } //类名为"header"的元素后代中类名为"logo"的元素
.header.mobile //类名同时为"header"和"moblie"的元素
.header p, .header h3 //类名为"header"的后代元素中的p标签和h3标签
#header .nav>li //id为"header"的元素后代类名为"nav"的元素的直接子元素li标签
#header a:hover ///id为"header"的元素后代中在hover状态下的a元素
#header .logo~p //id为"header"的元素后代类名为"logo"的元素的后面所有同级标签为p的元素
#header input[type="text"] //id为"header"的元素后代中属性为"type="text"的input的标签
列出你知道的伪类选择器
E:first-child 匹配元素E的第一个子元素
E:nth-last-child 匹配其父元素的第n个子元素，第一个编号为1
E:nth-of-type(n) 与:nth-child作用类似，但是仅匹配使用同种标签的元素
E:nth-last-of-type(n) 与 nth-last-child作用相似，但是仅匹配使用同种标签的元素
E:first-child 匹配父元素的第一个子元素
E:last-child 匹配父元素的最后一个子元素
E:active 匹配鼠标已经在其上按下，但是还没有释放的E元素
E:hover 匹配鼠标悬停其上的E元素
div:first-child、div:first-of-type、div :first-child和div :first-of-type的作用和区别 （注意空格的作用）
div:first-child //匹配父元素下的第一个子div元素
div:first-of-type //匹配父元素下相同类型子元素中的第一个div元素
div :first-child //匹配div下的第一个子元素
div :first-of-type //匹配div父元素下的第一个同类型元素
运行如下代码，解析下输出样式的原因。
网友评论