CSS选择器

1.class 和 id 的使用场景?

id选择器：每个标签只能有一个id且每个id只能使用一次，多用于页面分块的块级标签上；
class选择器：每个标签可以有多个类且同一个类可以用到不同的标签上，多用于多个标签样式相似或完全相同时；

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

基础选择器	含义
*	通用元素选择器
#id	id选择器
.class	类选择器
element	标签选择器

属性选择器	含义
E[attr]	匹配所有属性为attr的元素
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元素
E:hover	匹配鼠标悬停其上的E元素
E:focus	匹配获得当前焦点的E元素
E:nth-child(n)	匹配其父元素的第n个子元素
E:nth-last-child(n)	匹配其父元素的倒数第n个子元素
E:last-child	E的父元素下的最后一个子元素

组合选择器	含义
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::before	在E元素之前插入生成的内容
E::after	在E元素之后插入生成的内容
E::first-line	匹配E元素内容的第一行
E::first-letter	匹配E元素内容的第一个字母

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

从高到低分别是:

1. 在属性后面使用 !important 会覆盖页面内任何位置定义的元素样式
2. 作为style属性写在元素标签上的内联样式
3. id选择器
4. 类选择器
5. 伪类选择器
6. 属性选择器
7. 标签选择器
8. 通配符选择器
   9.浏览器自定义

复杂场景时，计算优先级时通过数标签来计算，先数id，如果id相等再数类，如果id不相等，id多的选择器权重高，权重越高，优先级越高。如果id选择器数量相同，再数类选择器，最后数标签。

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

a:link
a:visited
a:hover
a:active
原因：

• 当鼠标移动到a标签上，此时与标签颜色相关的选择器有：a:link,a:visited,a:hover,这三个选择器拥有相同的优先级，但是被写在最后的选择器会覆盖掉之前的选择器，因此要想实现“当鼠标移动到a标签上变换颜色”的效果，需要将a:hover置于 a:link 和 a:visited 之后
• 当鼠标点击a标签，此时与标签颜色相关的选择器有：a:link,a:visited,a:hover和a:active，这四个选择器拥有相同的优先级，但是被写在最后的选择器会覆盖掉之前的选择器，因此要想实现“当鼠标点击a标签时变换颜色”的效果，需要将a:active置于a:link,a:visited,a:hover 之后。

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

选择器的样式	含义
#header{ }	id选择器，匹配id="header"的元素
.header{ }	类选择器，匹配class="header"的元素
.header .logo{ }	后代选择器，匹配class="header"元素的后代元素中class="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元素鼠标悬浮在其表面时的样式

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

伪类选择器	含义
E:first-child	E的父元素下的第一个子元素
E:link	匹配所有未被点击的链接
E:visited	匹配所有已被点击的链接
E:active	匹配鼠标已经其上按下，还没有释放的E元素
E:hover	匹配鼠标悬停其上的E元素
E:focus	匹配获得当前焦点的E元素
E:nth-child(n)	匹配其父元素的第n个子元素
E:nth-last-child(n)	匹配其父元素的倒数第n个子元素
E:last-child	E的父元素下的最后一个子元素

7. div:first-child和div:first-of-type的作用和区别?

• :first-child 匹配的是某父元素的第一个子元素，可以说是结构上的第一个子元素。

• :first-of-type 匹配的是该类型的第一个，类型是指什么呢，就是冒号前面匹配到的东西，比如 p:first-of-type，就是指所有p元素中的第一个。这里不再限制是第一个子元素了，只要是该类型元素的第一个就行了，当然这些元素的范围都是属于同一级的，也就是同辈的。

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

<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{
  color: red;
  }
  这会让aa变成红色；
• .item1:first-of-type{
  background: blue;
  }
  这会让aa和bb都变成蓝色。