CSS选择器相关知识点总结
1.class 和 id 的使用场景?
class用于选择同一类型元素，id用于选择某个元素。
2.CSS选择器常见的有几种?
-
基础选择器
-
通用元素选择器，匹配页面任何元素（这也就决定了我们很少使用）
-
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:last-child 匹配元素e的最后一个子元素
-
E:nth-child(n) 匹配其父元素的第n个子元素，第一个编号为1
-
E:first-of-type 匹配父元素下使用同种标签的第一个子元素，等同于nth-of-type(1)
-
E:hover 匹配鼠标悬停智商的e元素
-
E:focus 匹配获得焦点的e元素
-
伪元素选择器
-
E::first-line 匹配E元素的第一行
-
E::first-letter 匹配E元素的第一个字母
-
E::before 在e元素之前插入生成的内容
-
E::after 在e元素之后插入生成的内容
3.选择器的优先级是怎样的?对于复杂场景如何计算优先级？
优先级由高到低：
- 在属性后面使用!import
- 作为style属性写在元素标签上的内联样式
- id选择器
- 类选择器
- 伪类选择器
- 属性选择器
- 标签选择器
- 通配符选择器
- 浏览器自定义
根据选择器的组合来确定权重，权重高的优先生效 - 行内样式 --> 统计值为a
- ID选择器 --> 统计值为b
- 类、属性选择器、伪类选择器 --> 统计为c
- 标签选择器、伪类选择器 --> 统计为d
依位次比较a,b,c,d位的值，值高的优先级高；
4.a:link, a:hover, a:active, a:visited 的顺序是怎样的？ 为什么？
a:link, a:visited, a:hover, a:active；
原因：因为要实现visited的效果，visited必须出现在link之后，然后被visited之后，要实现hover，hover必须在visited的后面，然后链接再被点要实现active的效果，就需要把active放在hover的后面。
5.以下选择器分别是什么意思?
#header{/*id选择器，匹配ID="header"的元素*/
}
.header{/*类选择器，匹配类=header的元素*/
}
.header .logo{/*后代选择器，匹配类为header中后代元素类为logo的元素*/
}
.header.mobile{/*类选择器，匹配class="header mobile"的元素*/
}
.header p, .header h3{/*多元素选择器，匹配class="header"元素的后代p元素和后代h3元素*/
}
#header .nav>li{ /*多元素选择器，匹配id="header"元素的后代class="nav"元素的直接后代li元素*/
}
#header a:hover{/*伪类选择器，匹配id="header"元素的后代a元素鼠标悬浮在其表面时的样式*/
}
#header .logo~p{/*伪类选择器，匹配id="header"元素的后代里class="logo"后面所有的p标签*/
}
#header input[type="text"]{/*伪类选择器，匹配id="header"元素的后代里type="text"de input标签*/
}
6.列出你知道的伪类选择器
- E:first-child 匹配元素E的第一个子元素
- E:last-child 匹配元素e的最后一个子元素
- E:nth-child(n) 匹配其父元素的第n个子元素，第一个编号为1
- E:first-of-type 匹配父元素下使用同种标签的第一个子元素，等同于nth-of-type(1)
- E:hover 匹配鼠标悬停智商的e元素
- E:focus 匹配获得焦点的e元素
7.div:first-child和div:first-of-type的作用和区别
运行如下代码，解析下输出样式的原因。
<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>
div:first-child：是指div的第一个子元素，所以代码中的aa是红色的
div:first-of-type：是指每一类的第一个，而代码中类名为item1的第一个·<p>是aa,第一个<h3>是bb，所以它们会有backgroud，而cc没有
