CSS选择器

1 class 和 id 的使用场景?

class（类选择器）可以有多个相同的class类名，
id（id选择器）必须是唯一的，只有一个

class样式可使用在多个标签上，用于多个标签样式相同或相似。
id用于指定唯一一个标签的样式，多用于页面分块的块级标签上。

2 CSS选择器常见的有几种?

常用的有7种
1属性选择器
2伪类选择器
3伪元素选择器
4通配符选择器
5ID选择器
6类选择器
7标签选择器

3 选择器的优先级是怎样的?对于复杂场景如何计算优先级？

3.1 优先级（高——》低）
1 属性后使用！important，会覆盖页面的任意位置定义的元素样式。
2 作为style属性写在元素上的内联样式

3 id选择器
4 类选择器
5 伪类选择器
6 属性选择器
7 标签选择器
8 通配符选择器
9 浏览器自定义

3.2 复杂场景怎么计算的优先级？
（1）默认将选择器划分成a b c d 四等级
a
行内样式

b
id选择器
c
类选择器、 属性选择器、 伪类选择器
d
标签选择器、 伪元素选择器

（2）计算各等级的总个数，
（3）从a开始作比较。如果a的个数最大，则a的权重高；
如果a中的个数相同，再比较b,以此类推。

4 a:link, a:hover, a:active, a:visited 的顺序是怎样的？ 为什么？

正确顺序：
a:link（鼠标未点击状态）
a:visited（点击后状态）
a:hover（悬停状态）
a:active（鼠标点击并未释放的状态）
原因：
四个伪类选择器的优先级相同，考虑到样式覆盖，后面样式会覆盖前面的样式。

5 以下选择器分别是什么意思?

header{
ID为header 的元素
}
.header{
class为header的元素
}
.header .logo{
class为 header后代中的class为logo的元素
}
.header.mobile{
class是header又是mobile 的元素
}
.header p, .header h3{
class为header的后代标签p的元素和 class为header的后代标签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的后代的input标签中type="text" 属性的元素
}

6 列出你知道的伪类选择器

E:link 匹配所有未点击的链接
E:hover 鼠标悬停在E元素上
E:active 鼠标已经点击，还没有释放元素
E:visited 鼠标已经点击过
E:focus 获得焦点的元素
E:selection 当前元素选中的元素
E:enabled 没有禁用的元素
E:disabled 已经禁用的元素
E:checked 被选中的元素
E:lang(c) lang属性等于c的元素
E:first-child E的父元素的第一个子元素
E:last-child E的父元素的最后一个子元素

E:nth-child（n） E的父元素的第n个子元素
E:nth-last-child(n) E的父元素的倒数第n个子元素

E:first-of-type(n) 匹配父元素下的使用同种标签的第n个子元素
E:nth-of-type(n) 匹配使用同种标签的元素

补充：n的取值
1,2,3,4.......
奇数： odd, 2n+1
偶数： even 2n
可以应用于表格中的奇数行和偶数行的背景颜色

7 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元素下所有后代同种标签中的第一个元素

8 运行如下代码，解析下输出样式的原因。

图所示：

Paste_Image.png

如图样式：
1 aa为字体颜色为红色
解析样式：
因为类为item1包含aa的元素，是.ct父类下的第一个子元素，所以对应输出aa字体为红色
2 aa、bb背景为蓝色
解析样式：
包含aa和bb，类为item1是.ct下的第一个p元素和第一个h3元素，所以aa bb背景为蓝色