关于选择器的一些问题

一、id 和 class的使用场景?

#id id选择器，匹配特定id的元素

 #id-selector{
    color: #333;
  }

.class  类选择器，匹配class包含(不是等于)特定类的元素
 .class-selector{
    background: #ccc;
  }

• id定位于页面上的唯一的元素
  页面上的元素是独一无二的就可以起名字为id，一个页面上不要出现相同
  id的两个元素，这样是不符合HTML规范的

• class定位于页面上的某一类元素
  页面上有些元素有某些共同的特征,我们可以加同一个class
  这个元素有个别的特征，我们再加一个class

二、CSS选择器常见的有几种?

基础选择器

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

组合选择器

|选择器| 含义|
| --- | --- | --- |
|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[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的元素|

伪类选择器

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

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

CSS优先级

从高到低分别是

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

复杂场景

  #test p.class1 {...}
  #test .class1.class2 {...}
行内样式 <div style="xxx"></div> ==> a
ID 选择器 ==> b
类，属性选择器和伪类选择器 ==> c
标签选择器、伪元素 ==> d

• 先比较a值的大小，a值大的则优先级高;如果a值相等，则再比较b值的大小，b值大的优先级高；如果b值相等，则比较c值的大小，c值大的优先级高；如果c值相等，则比较d值的大小，d值大的优先级高.

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

样式覆盖顺序是a:link-->a:visited-->a:hover-->a:active.
在元素优先级一样的情况下，为了实现显示结果，在样式覆盖上要遵循的顺序。
a:link 匹配所有未被点击的链接
a:visited 匹配所有已被点击的链接
a:hover 匹配鼠标悬停其上的E元素
a:active 匹配鼠标已经其上按下、还没有释放的E元素

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

#header{} id选择器，匹配id值为header的元素
.header{} class选择器，匹配class为header的元素
.header .logo{} 后代选择器，class选择器为header，匹配header元素所有后代中的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的选择器下，去匹配属性值为text的元素

六、列出你知道的伪类选择器

| 选择器 | 含义|
| --- | --- | --- |
| 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| 匹配用户当前选中的元素|
| 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)|

七、div:first-child和div:first-of-type的作用和区别

div:first-child：匹配在div元素下的第一个子元素
div:first-of-type：匹配在div元素下的使用同一种标签的第一个子元素
区别：在div元素下的第一个子元素，只会有一个；而在div元素下使用的标签的却可以有很多，当标签不是第一个子元素时，但是另一种的标签，也是可以匹配的，这样就导致不同的显示结果。

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

<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

• aa颜色为红色:.item1:first-child的颜色为red，在元素为ct下的第一个元素是aa,
• aa,bb的背景色为蓝色，cc没有：因为.item1:first-of-child的意思在ct元素下的同种元素被匹配，而只会有p和第一个h3中的元素匹配，所以ccc背景色没有匹配上