CSS选择器

1. CSS选择器的使用场景？

答：

（1）id：id选择器，使用#name定义（name为id名，可任意取名），使用id="name"调用，其优先级高于类选择器，一个标签只能有一个id且每个id只能使用一次，多用于页面分块的块级标签上；

（2）class：类选择器，使用.name定义（name为类名，可任意取名），使用class="name"调用，一个标签可以有多个类且同一个类可以用到不同的标签上，多用于多个标签样式相似或完全相同时；

（3）标签选择器：直接在样式中选中该标签名字，为其添加样式。

（4）通用选择器：匹配页面中任何元素，控制所有共同的属性。

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

答：

5种，分别为 基础选择器，组合选择器，属性选择器，伪类选择器，伪元素选择器

（1）基础选择器

选择器	含义
*	通用元素选择器，匹配页面任何元素（这也决定了我们很少使用）
#id	id选择器，匹配特定的id元素
.class	类选择器，匹配 class包含（不是等于）特定类的元素
element	标签选择器

（2）组合选择器

序号	选择器	含义
1	E,F	多元素选择器，用 , 分隔同时匹配元素E和元素F
2	E F	后代选择器，使用 空格 分隔，匹配E元素所有的后代（不只是子元素、子元素向下递归）元素F
3	E>F	子元素选择器，用>分隔，匹配E元素的所有直接子元素
4	E+F	直接相邻选择器，匹配E元素之后的相邻的同级元素F
5	E~F	普通相邻选择器（弟弟选择器），匹配E元素之后的同级元素F（无论直接相邻与否）
6	.class1.class2	id和class选择器和选择器连写的时候中间没有分隔符，. 和 # 本身充当分隔符的元素
7	element#id	id和class选择器和选择器连写的时候中间没有分隔符，. 和 # 本身充当分隔符的元素

解释说明第4个，E+F 匹配的是与之直接想相邻的元素，如图可见,与 .p1直接相邻的元素 .p3 被选中

直接相邻选择器

解释说明第5个 E~F 普通相邻选择器（弟弟选择器），如图,与.p1普通相邻的元素.p3 p4所在的元素都被选中

普通相邻选择器

解释说明第6个 .class1.class2 ，通常有2种形式，一种为 标签.class，如图一，一种为.class1.class2 ，如图二

图一 图二

（3）属性选择器

序号	选择器	含义
1	E[attr]	匹配所有具有属性attr的元素，div[id]就能取到所有有id属性的div
2	E[attr = value]	匹配属性attr值为value的元素，div[id=test],匹配id=test的div
3	E[attr ~= value]	匹配所有属性attr具有多个空格分隔、其中一个值等于value的元素
4	E[attr ^= value]	匹配属性attr的值以value开头的元素
5	E[attr $= value]	匹配属性attr的值以value结尾的元素
6	E[attr *= value]	匹配属性attr的值包含value的元素

说明：举个例子，比如第2个，如下图，input标签中所有type=text的元素都被选中，type=password 则没有被选中，其他的方式同理；

属性选择器

（4）伪类选择器

序号	选择器	含义
1	E:first-child	匹配作为长子（第一个子女）的元素E
2	E:link	匹配所有未被点击的链接
3	E:visited	匹配所有已被点击的链接
4	E:active	匹配鼠标已经其上按下、还没有释放的E元素
5	E:hover	匹配鼠标悬停其上的E元素
6	E:focus	匹配获得当前焦点的E元素
7	E:lang(c)	匹配lang属性等于c的E元素
8	E:enabled	匹配表单中可用的元素
9	E:disabled	匹配表单中禁用的元素
10	E:checked	匹配表单中被选中的radio或checkbox元素
11	E::selection	匹配用户当前选中的元素
12	E:root	匹配文档的根元素，对于HTML文档，就是HTML元素
13	E:nth-child(n)	匹配其父元素的第n个子元素，第一个编号为1
14	E:nth-last-child(n)	匹配其父元素的倒数第n个子元素，第一个编号为1
15	E:nth-of-type(n)	与:nth-child()作用类似，但是仅匹配使用同种标签的元素
16	E:nth-last-of-type(n)	与:nth-last-child() 作用类似，但是仅匹配使用同种标签的元素
17	E:last-child	匹配父元素的最后一个子元素，等同于:nth-last-child(1)
18	E:first-of-type	匹配父元素下使用同种标签的第一个子元素，等同于:nth-of-type(1)
19	E:last-of-type	匹配父元素下使用同种标签的最后一个元素，等同于:nth-of-type(n)

（5）伪元素选择器

序号	选择器	含义
1	E::first-line	匹配E元素内容的第一行
2	E::first-letter	匹配E元素内容的第一个字母
3	E::before	在E元素之前插入生成的内容
4	E::after	在E元素之后插入生成的内容

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

优先级如何计算的？：

1.优先级就是分配给指定的CSS声明的一个权重，它由 匹配的选择器中的 每一种选择器类型的 数值 决定。

2.当优先级与多个CSS声明中任意一个声明的优先级相等的时候，CSS中最后的那个声明将会被应用到元素上

3.当同一个元素有多个声明的时候，优先级才会有意义。因为每一个直接作用于元素的CSS规则总是会接管/覆盖（take over）该元素从祖先元素继承而来的规则。

参考链接: 优先级-MDN

3.1 优先级由高到低分别为：

（1）在属性后面使用 !important 会覆盖页面内任何位置定义的元素样式

（2）作为style属性写在元素标签上的内联样式

（3）id选择器

（4）类选择器

（5）伪类选择器

（6）属性选择器

（7）标签选择器

（8）通配符选择器

（9）浏览器自定义

3.2 复杂场景的使用：

我们按权重由高到低作如下归类：

• 行内样式 <div style="xxx"></div> ==> a

• ID 选择器 ==> b

• 类，属性选择器和伪类选择器 ==> c

• 标签选择器、伪元素 ==> d

测试举例：以下样式描述的是同一个元素，当前面权重相同的时候，往后比较，谁的权重大听谁的

 #test p.class1 {...}
 #test .class1.class2 {...}

选择器       所描述的样式                权  重
*               {}           /* a=0 b=0 c=0 d=1   ->   0,0,0,1 */
p               {}           /* a=0 b=0 c=0 d=1   ->   0,0,0,1 */
a:hover         {}           /* a=0 b=0 c=1 d=1   ->   0,0,0,2 */  说明：a 和 :hover 各占1
ul li           {}           /* a=0 b=0 c=0 d=2   ->   0,0,0,2 */
ul ol+li        {}           /* a=0 b=0 c=0 d=3   ->   0,0,0,3 */
h1+input[type=hidden]{}      /* a=0 b=0 c=1 d=2   ->   0,0,1,1 */
ul ol li.active   {}         /* a=0 b=0 c=1 d=3   ->   0,0,1,3 */
#ct .box p        {}         /* a=0 b=1 c=1 d=1   ->   0,1,1,1 */
div#header:after  {}         /* a=0 b=1 c=0 d=2   ->   0,1,0,2 */
style=""                     /* a=1 b=0 c=0 d=0   ->   1,0,0,0 */

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

答：

顺序为：

a{
  color: red;
}
a:visited{
  color: black;
}
a:hover{
  color: blue;
}
a:active{
  color: yellow;
}

原因：样式覆盖的问题，后面的样式会覆盖前者的样式
通常鼠标操作为：默认标签样式--悬浮在标签上面--点击标签--点击过后 这4种状态
（1）link：默认样式
（2）hover：悬浮
（3）active：鼠标按下点击
（4）visited：点击过后

解释：
1.当鼠标悬浮在标签上的时候，hover 覆盖 link样式，所以hover放在link之后
2.当鼠标按下的时候，鼠标按下的样式要覆盖前面所有样式（hover，link），所以active放在最后
3.当松开鼠标的时候，为visited状态，应该覆盖前面所有状态（link，hover，active），此时，鼠标移开所在标签的时候，只有link样式和visited样式，没有了hover和active样式，visited应该覆盖link样式;
当鼠标再次悬浮在该点击后的标签上时，hover覆盖visited和link

以上，总结顺序从前到后为: link >> visited >> hover>> active

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  添加伪类当鼠标悬浮在“a”上的样式为...
}
#header .logo~p{
  // 选中id为 “header” 的后代元素 类名为 “logo” 的元素的同级元素 p （不论是否直接相邻）
#header input[type="text"]{
  // 选中id为 “header” 的后代元素 类型为“text”的所有 input 元素
}

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

答：往上见题 2-（4）

7. div:first-child、div:first-of-type、div :first-child和div :first-of-type的作用和区别 （注意空格的作用）

答：

（1）div:first-child 表示作为长子（第一个子女）元素 div 被选中

（2）div:first-of-type 表示父元素下使用同种标签的第一个子元素 div 被选中

（3）div :first-child 后代选择器，匹配div元素下的第一个子元素（选择div的子元素）

（4）div :first-of-type 后代选择器，匹配div元素下使用同种标签的第一个子元素（选择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>

结果

（1）解释：第一个样式描述

.item1:first-child{  color: red;} 

表示为：item1元素的父元素的第一个子元素，所以选中<p class="item1">aa</p> 设置颜色为红色

（2）解释：第二个样式描述

.item1:first-of-type{  background: blue;}

表示为：在item1父元素的子元素中， 选中同种元素的第一个，由item1 表示的元素有1个p，2个h3，那么选中第一个 p h3 元素 所以aa ，bb背景色变蓝色