CSS 选择器

1.class 和 id 的使用场景?

• class用于选择同一类型的元素
• id元素具有唯一性，只匹配一个元素

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

• 基础选择器

  1. 通用元素选择器，匹配页面所有元素 （*）
  2. id选择器，匹配特定元素（#id）
  3. class选择器，匹配某一类元素（.class）
  4. 标签选择器

• 组合选择器

  1. E,F 多元素选择器，同时匹配E或F

     
     1.png

  2. E F 后代选择器，匹配E所有后代F

     ![2.png](https://img.haomeiwen.com/i2170795/b3602f291de6ab4c.png?
     imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

  3. E>F 子元素选择器，匹配E的所有直接子元素

     3.png

  4. E+F 直接相邻选择器 匹配和E相邻的F

  4.png
  5. E~F 普通相邻选择器 匹配和E之后的同级的F
  5.png
  6. EF 匹配同时具有两个属性

6.png

• 属性选择器
  E[attr] 匹配所有具有属性attr的元素

7.png

• 伪类选择器
  E:link 匹配所有未被点击的链接
  E:visited 匹配所有已被点击的链接
  E:active 匹配鼠标已经其上按下、还没有释放的E元素
  E:hover 匹配鼠标悬停其上的E元素
  E:enabled 匹配表单中可用的元素
  E:disabled 匹配表单中禁用的元素
  E:nth-child(n) 匹配其父元素的第n个子元素，第一个编号为1
  E:nth-of-type(n) 与:nth-child()作用类似，但是仅匹配使用同种标签的元素
  E:first-of-type 匹配父元素下使用同种标签的第一个子元素，等同于:nth-of-type(1)
• 伪元素选择器
  E::before 在E元素之前插入生成的内容
  E::after 在E元素之后插入生成的内容

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

• css优先级
  1. 在属性后面使用 !important 会覆盖页面内任何位置定义的元素样式
  2. 作为style属性写在元素标签上的内联样式
  3. id选择器
  4. 类选择器
  5. 伪类选择器
  6. 属性选择器
  7. 标签选择器
  8. 通配符选择器
  9. 浏览器自定义
• 复杂场景计算优先级
  选择器的特殊性分为4个等级，a b c d，从左到右，越左边的越优先, 如果一个选择器规则有多个相同类型选择器，则+1。
  如果是HTML行内样式，那么特殊性最优先 a；id选择器的特殊性是 b；类选择器、伪类选择器、属性选择器为 c；标签选择器、伪元素选择器为 d。!important优先级最高无视上述规则。当选择器优先级相同时，那么后定义的会覆盖先定义的

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

这是个样式覆盖的问题，由于伪类选择器后面的样式会覆盖前面的，先来看 a:hover, a:active，当鼠标点击未松开时是同时触发他们俩的，所以要想都有效果， a:active要放在后面。同理.a:link和 a:visited要放在它俩前。

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

 #header{      }   ------------------------------- id选择器，匹配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:hover（鼠标在a链接悬停时样式）
#header .logo~p{      }-------------- 后代选择器，匹配id="header"下的class="logo"元素之后的同级p元素
#header input[type="text"]{      }----------------- 后代选择器，匹配id="header"下的，input标签中，属性type的值为"text"的元素

• 列出你知道的伪类选择器
  E:link 匹配所有未被点击的链接
  E:visited 匹配所有已被点击的链接
  E:active 匹配鼠标已经其上按下、还没有释放的E元素
  E:hover 匹配鼠标悬停其上的E元素
  E:enabled 匹配表单中可用的元素
  E:disabled 匹配表单中禁用的元素
  E:nth-child(n) 匹配其父元素的第n个子元素，第一个编号为1
  E:nth-of-type(n) 与:nth-child()作用类似，但是仅匹配使用同种标签的元素
  E:first-of-type 匹配父元素下使用同种标签的第一个子元素，等同于:nth-of-type(1)
• div :first-child和div :first-of-type的作用和区别 （注意空格的作用）
  1. div：first-child匹配的是其父元素的第一个子元素
  2. div:first-of-type匹配父元素下使用同种标签的第一个子元素
• 运行如下代码，解析下输出样式的原因

<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>

8.png