CSS选择器

1.class 和 id 的使用场景?

class用于网页中样式的设置，同一元素可以定义多种样式（多个class),同一class可以被运用到不同元素上（不同元素class取值一样）。
id用来作为文档内某一元素的唯一标识，不可以被重复命名，且id的权重比class的权重高很多，多用于js操作中实现元素的获取。

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

1.基础选择器

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

*{
margin:0;
padding:0;
}
#id-selector{
  color:red;
}
.class-selector{
background:black;
}
p{
font-size:20px;
}

2.组合选择器

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选择器和选择器连写的时候中间没有分隔符，.和#本身充当分隔符的元素。

3.属性选择器

E[attr] 匹配所有具有属性attr的元素，div[id]就能取得所有有id属性的div.
E[attr=value] 匹配属性attr值为value的元素，div[id=test],匹配id=test的div。
E[attr~=value] 匹配所有属性attr具有多个空格分隔、其中一个值等于value的元素。
E[attr^=value] 匹配属性attr的值以value开头的元素。
E[attr$=value] 匹配属性attr的值以value结尾的元素。
E[attr*=value] 匹配属性attr的值value包含的元素

4.伪类选择器

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::selectionz 匹配用户当前选中的元素
（所以的选择器列表在MDN）

5.伪类选择器

E:root 匹配文档的根元素，对于HTML文档，就是HTML元素
E:nth-child(n) 匹配其父元素的第n个子元素，第一个编号为1
E:nth-last-child(n) 匹配其父元素的倒数第n个子元素，第一个标号为1
E:nth-of-type(n) 与nth-child类似，但是仅匹配使用同种标签的元素
E:nth-last-of-type(n) 与nth-last-child类似，但是仅匹配使用同种标签的元素
E:last-child 匹配其父元素的最后一个子元素，等同于nth-last-child(1)
E:first-of-type 匹配父元素下使用同种标签的第一个子元素，等同于nth-of-type(1)
E:last-of-type 匹配父元素下使用同种标签的最后一个子元素，等同于nth-last-of-type(1)
E:only-child 匹配父元素下仅有的一个子元素，等同于first-child、last-child、nth-child(1)、nth-last-child(1)
E:only-of-type 匹配其父元素下使用同种标签的唯一一个子元素，等同于first-of-type、last-of-type、nth-of-type(1)、nth-last-of-type(1)
E:empty 匹配一个不包含任何子元素的元素，文本节点也被看做子元素
E:not(selector) 匹配不符合当前选择器的任何元素

n的取值：

1,2,3,4,5
2n+1,2n,4n-1
odd,even

5.伪元素选择器

E::first-line 匹配E元素内容的第一行
E::first-letter 匹配E元素内容的第一个字母
E::before 在E元素之前插入生成的内容
E::after 在E元素之后插入生成的内容

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

优先级
1.在属性后面使用！important会覆盖页面内任何位置定义的元素样式
2.作为style属性写在元素标签上的内联属性
3.id选择器
4.类选择器
5.伪类选择器
6.属性选择器
7.标签选择器
8.通配符选择器
9.浏览器自定义
复杂场景如何计算优先级
行内样式
==>a
id选择器==>b
类，属性选择器和伪类选择器==>c
标签选择类、伪元素==>d

*   {}    /*    a=0 b=0 c=0 d=0  ->0,0,0,0 */
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,1,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,2 */
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 c=0 c=0 d=0 ->1,0,0,0*/

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

a:link 、a:visited 、a:hover 、a:active（LoVe/HAte)

link 链接平常的状态
visited 链接被访问过之后的状态
hover 鼠标放在链接上面的，还未松开的时候
active 链接被按下的时候
举例：
若让未访问链接颜色为蓝色，活动链接为绿色，已访问链接为红色；
第一种情况：定义的顺序为a:visited、a:hover、a:link，这时会发现，把鼠标放在未访问过的蓝色链接上，它并不变成绿色，只有放在已访问的红色链接上，链接才会变绿；
第二种情况：定义的顺序为：a:link、a:visited、a:hover，这时无论鼠标经过的链接有没有被访问，它都会变成绿色；
这是因为，一个鼠标经过的未访问链接同时拥有a:link、a:hover两种属性，在第一种情况下，a:link离它最近，所以它优先满足a:link，而放弃a:hover的重复定义。第二种情况，无论链接有没有被访问过，它首先要检查是否符合a:hover的标准（即是否有鼠标经过它），满足，则变成绿色，不满足，则继续向上查找，一直找到满足条件的定义为止。
所以：1.鼠标经过的"未访问链接"同时拥有a:link、a:hover两种属性，后面的属性会覆盖前面的属性定义；
2.鼠标经过的"已访问链接”同时拥有a:visited、a:hover两种属性，后面的属性会覆盖前面的属性定义；

所以，a:hover定义一定要放在a:link、a:visited的后面

5.

#header{
}           id为header的元素                                                           
.header{
}         class为header的元素
.header .logo{
}    匹配class为header的元素下所有后代class为logo的元素
.header.mobile{
}   匹配class为header的元素下所有class为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的后代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::selectionz 匹配用户当前选中的元素
E:root 匹配文档的根元素，对于HTML文档，就是HTML元素
E:nth-child(n) 匹配其父元素的第n个子元素，第一个编号为1
E:nth-last-child(n) 匹配其父元素的倒数第n个子元素，第一个标号为1
E:nth-of-type(n) 与nth-child类似，但是仅匹配使用同种标签的元素
E:nth-last-of-type(n) 与nth-last-child类似，但是仅匹配使用同种标签的元素
E:last-child 匹配其父元素的最后一个子元素，等同于nth-last-child(1)
E:first-of-type 匹配父元素下使用同种标签的第一个子元素，等同于nth-of-type(1)
E:last-of-type 匹配父元素下使用同种标签的最后一个子元素，等同于nth-last-of-type(1)
E:only-child 匹配父元素下仅有的一个子元素，等同于first-child、last-child、nth-child(1)、nth-last-child(1)
E:only-of-type 匹配其父元素下使用同种标签的唯一一个子元素，等同于first-of-type、last-of-type、nth-of-type(1)、nth-last-of-type(1)
E:empty 匹配一个不包含任何子元素的元素，文本节点也被看做子元素
E:not(selector) 匹配不符合当前选择器的任何元素

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.运行如下代码，解析下输出样式的原因。


 
   aa
   bb
   ccc

运行效果如下：

b5ec69687ad61899bf89496bb178eef.png

.item1:first-child:匹配item1其父元素下的第一个子元素，item1的父元素是ct,它的第一个子元素是

，所以aa字体的颜色变红；
.item1:first-of-type:匹配item1其父元素下使用同种标签的第一个子元素，item1的父元素是ct，p标签是ct的第一个子元素，所以aa被蓝色边框覆盖，h3标签的第一个子元素

bb

，所以bb被蓝色边框覆盖，而

ccc

是h3的第二个子元素，所以ccc没有被蓝色边框覆盖。