class 和 id 的使用场景?
id：id选择器，使用#name定义（name为id名，可任意取名），使用id="name"调用，其优先级高于类选择器，一个标签只能有一个id且每个id只能使用一次，多用于页面分块的块级标签上
class：类选择器，使用.name定义（name为类名，可任意取名），使用class="name"调用，一个标签可以有多个类且同一个类可以用到不同的标签上，多用于多个标签样式相似或完全相同时；
额外补充：name：指定标签的名称
示例：<input type="text" name="username" />
使用场景：
- form表单：name可作为转递给服务器表单列表的变量名；如上面的传到服务器的名称为：username='text的值'。
- 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';
}
}
CSS选择器常见的有几种?
基础选择器
* 通用元素选择器，匹配页面任何元素（这也就决定了我们很少使用）
#id id选择器，匹配特定id的元素
.class 类选择器，匹配class包含(不是等于)特定类的元素
element 标签选择器
组合选择器
E,F 多元素选择器，用,分隔，同时匹配元素E或元素F
E F 后代选择器，用空格分隔，匹配E元素所有的后代（不只是子元素、子元素向下递归）元素F
E>F 子元素选择器，用>分隔，匹配E元素的所有直接子元素
E+F 直接相邻选择器(亲弟弟选择器)，匹配E元素之后的相邻的同级元素F
E~F 普通相邻选择器（弟弟们选择器），匹配E元素之后的同级元素F（无论直接相邻与否）
.class1.class2 id和class选择器和选择器连写的时候中间没有分隔符，.和 # 本身充当分隔符的元素
element#id id和class选择器和选择器连写的时候中间没有分隔符，.和 #本身充当分隔符的元素
属性选择器
E[attr] 匹配所有具有属性为attr的元素（div[id]能选择所有具有id属性的div）
E[attr=value] 匹配所有属性为value的元素（div[type=text]匹配id=text的div）
E[attr~=value] 匹配所有属性attr具有多个空格分隔，其中一个值等于value的元素
E[attr ^=value] 匹配属性attr的值以value开头的元素
E[attr $=value] 匹配属性attr的值以value结尾的元素
E[attr *=value] 匹配属性attr的值包含value的元素
伪类选择器
E:first-child 匹配元素E的第一个子元素
E:link 匹配未被点击的链接
E:visited 匹配点击过的链接
E:active 匹配当前被鼠标点下未释放的元素
E:hover 匹配鼠标悬停其上的元素
E:focus 匹配当前获得焦点的元素
E:lang(c) 匹配lang属性值等于c的元素
E:enabled 匹配表单中可用的元素
E:disabled 匹配表单中禁用的元素
E:checked 匹配表单中被选中的radio或checkbook元素
E:selection 匹配当前用户选中的元素
E:first-of-type 匹配父元素下使用同种标签的第一个子元素
E:first-child 匹配父元素下第一个子元素
伪元素选择器
E::first-line 匹配E元素的第一行
E::first-letter 匹配E元素的第一个字母
E::before 在e元素之前插入生成的内容
E::after 在e元素之后插入生成的内容
选择器的优先级是怎样的?对于复杂场景如何计算优先级？
优先级从高到低如下：
- 后面标有important的样式
- 写在元素标签上的行内样式
- id选择器
- 类选择器
- 伪类选择器
- 属性选择器
- 标签选择器
- 通配符选择器
- 浏览器默认
important > 行内 > ID > (类 | 伪类 | 属性选择器)class选择器 >( 伪元素|标签)元素选择器> 通配符 > 继承
选择器的特殊性由选择器本身决定，出现冲突时，高特殊性的声明胜出。对于复杂场景，可以使用特殊值来计算优先级，特殊性值表述为4个部分：0，0，0，0，计算规则如下：
- 所有行内属性 —— 1，0，0，0
- ID —— 0，1，0，0
- （类、属性选择器、伪类）class选择器 —— 0，0，1，0
- （元素、伪元素）元素选择器 —— 0，0，0，1
对于得到的值，相同位置上的数字越大的值代表的优先级越高；不同的位置按从前到后优先级依次降低，即 0，0，1，0 的优先级比 0，0，0，15 更高。
越是“特殊”的选择器优先级越高。具有相同优先级的选择器，如果样式出现冲突，那么后出现的样式会覆盖先出现的样式。
a:link, a:hover, a:active, a:visited 的顺序是怎样的？ 为什么？
link表示链接在正常情况下（即页面刚加载完成时）显示的颜色。
hover表示鼠标悬停时显示的颜色。
active表示当所指元素处于激活状态（鼠标在元素上按下还没有松开）时所显示的颜色。
visited表示点击元素之后的状态。
focus表示元素获得光标焦点时使用的颜色，主要用于文本框输入文字时使用
伪类的顺序应为link--visited--hover--focus--active。 a:active必须要在a:focus，a:hover的后面，否则就会被覆盖。 a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的,如果放在前面就会被这两者覆盖。
记顺序：**love hate 中间一个focus **
浏览器解释CSS时遵循的“就近原则”：
- 鼠标经过的“未访问链接”同时拥有a:link、a:hover两种属性，后面的属性会覆盖前面的属性定义；
- 鼠标经过的“已访问链接”同时拥有a:visited、a:hover两种属性，后面的属性会覆盖前面的属性定义；
所以说，a:hover定义一定要放在a:link、a:visited的后面，，，
以下选择器分别是什么意思?
#header{
}/*id 为 header 元素*/
.header{
}/*有 header 类的所有元素*/
.header .logo{
}/*有 header 类的所有元素的后代中有 logo类的所有元素*/
.header.mobile{
}/*同时有 header 类和 mobile 类的所有元素*/
.header p, .header h3{
}/*有 header 类的所有元素的后代 p 元素，或者有 header 类的所有元素的后代 h3 元素*/
#header .nav>li{
}/*id 为 header 的元素的有 nav 类的后代元素的直接 li 子元素*/
#header a:hover{
}/*id 为 header 的元素的子元素中，处于鼠标悬停状态的链接*/
#header .logo~p{
}/*id为header元素的所有后代元素中，class为logo的元素之后的所有同级元素p的css样式 */
#header input[type="text"]{
}/*id 为 header 的元素的 input 子元素中type属性值为 text 的元素*/
列出你知道的伪类选择器
E:first-child 匹配元素E的第一个子元素
E:link 匹配未被点击的链接
E:visited 匹配点击过的链接
E:active 匹配当前被鼠标点下未释放的元素
E:hover 匹配鼠标悬停其上的元素
E:focus 匹配当前获得焦点的元素
E:lang(c) 匹配lang属性值等于c的元素
E:enabled 匹配表单中可用的元素
E:disabled 匹配表单中禁用的元素
E:checked 匹配表单中被选中的radio或checkbook元素
E:selection 匹配当前用户选中的元素
E:first-of-type 匹配父元素下使用同种标签的第一个子元素
E:first-child 匹配父元素下第一个子元素
div:first-child、div:first-of-type、div :first-child和div :first-of-type的作用和区别 （注意空格的作用）
div:first-child选择div的父元素的第一个子元素为必须为div
div:first-of-type 选择div父元素的第一个类型为div的div元素，不一定是第一个子元素
div :first-child 选择div元素下的第一个子元素
div :first-of-type 选择div元素下的同类元素的第一个子元素
这两者因为一个空格都脱离了必须是div类型的控制
运行如下代码，解析下输出样式的原因。
<style>
.item1:first-child{
color: red;
}
.item1:first-of-type{
background: blue;
}
</style>
<div class="ct">
<p class="item1">aa</p>
<h3 class="item1">bb</h3>
<h3 class="item1">ccc</h3>
</div>
.item1:first-child{} 选择的是div下的第一个class为item1的元素。
.item1:first-of-type{} 选择的是div下同类标签的第一个class为item1的元素,所以第二个h3的背景色没有变
结果显示
网友评论