CSS选择器

1. class 和 id 的使用场景?

id：指定标签的唯一标识，根据提供的唯一id号，快速获取标签对象。id属性的值，在当前的page页面要是唯一的。
class：指定标签的类名，把一些特定样式放到一个class类中，需要此样式的标签，可以在添加此类。，可以把多个类，放在一个class属性里，但必须用空格隔开。

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

1.ID选择器
2.类选择器
3.后代选择器
4.标签选择器
5.元素选择器
6.子选择器
7.伪类选择器
8.通配符选择器
9.属性选择器

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

从高到低分别是：
1.在属性后面使用 !important 会覆盖页面内任何位置定义的元素样式
2.作为style属性写在元素标签上的内联样式
3.id选择器
4.类选择器
5.伪类选择器
6.属性选择器
7.标签选择器
8.通配符选择器
9.浏览器自定义
计算优先级：
　　每个规则对应一个初始"四位数"：0、0、0、0
　　若是 行内选择器，则加1、0、0、0
　　若是 ID选择器，则加0、1、0、0
　　若是 类选择器/属性选择器/伪类选择器，则分别加0、0、1、0
　　若是 元素选择器/伪元素选择器，则分别加0、0、0、1
算法：将每条规则中，选择器对应的数相加后得到的”四位数“，从左
到右进行比较，大的优先级越高。

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

正确顺序：a:link、a:visited、a:hover、a:active
在CSS中，如果对于a元素有针对不同条件的定义，宜将最一般的条件放在最上面，并依次向下，保证最下面的是最特殊的条件。
这样，浏览器在a元素时，才会从特殊到一般、逐级向上验证条件，才会使你的每一个CSS语句都起到效果。
鼠标经过的“未访问链接”同时拥有a:link、a:hover两种属性，后面的属性会覆盖前面的属性定义。
鼠标经过的“已访问链接”同时拥有a:visited、a:hover两种属性，后面的属性会覆盖前面的属性定义。
所以说，a:hover定义一定要放在a:link、a:visited的后面。

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

#header{ }选择id为header的元素
.header{ }选择类名为header的所有元素
.header .logo{ } 选择类名为header元素的后代元素中类名为logo的元素
.header.mobile{ }选择类名为header和mobile的元素
.header p, .header h3{ }选择类名为header元素的后代元素中所有p和h3元素
#header .nav>li{ }选择id为header元素后代中类名为nav元素的所有直接li子元素
#header a:hover{ }选择id为header元素后代中鼠标悬停其上的a元素
#header .logo~p{ }选择id为header元素后代中类名为logo元素之后的同级元素p
#header input[type="text"]{ }选择id为header元素的后代元素中type属性为text的input元素

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

E:first-child 匹配作为长子（第一个子女）的元素E
E:link 匹配所有未被点击的链接
E:visited 匹配所有已被点击的链接
E:active 匹配鼠标已经其上按下、还没有释放的E元素
E:hover 匹配鼠标悬停其上的E元素
E:focus 匹配获得当前焦点的E元素
E:lang(c) 匹配lang属性等于c的E元素
E:enabled 匹配表单中可用的元素
E:disabled 匹配表单中禁用的元素
E:checked 匹配表单中被选中的radio或checkbox元素
E::selection 匹配用户当前选中的元素

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

div:first-child 匹配的是div元素的第一个子元素，可以说是结构上的第一个子元素。
div:first-of-type 匹配的是div元素下该类型的第一个子元素。

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>
结果：

Paste_Image.png
分析：
.item1:first-child{ color: red; }选择的是类名为item1的第一个子元素，即是p元素，把它的文本颜色改为红色。
.item1:first-of-type{ background: blue; }选择的是类名为item1的所有type类型的第一个元素，即选择了p元素和第一个h3元素，把他们的背景色改为蓝色。