CSS选择器

class 和 id 的使用场景?

• id选择器优先级很高且只能使用一次，因此一般用于页面分块的块级标签上
• 类选择器，一个标签上可以有多个类，且同一个类可以用在多个标签上，多用于多个标签样式相同时

CSS选择器常见的有几种?

常见的选择器有：

1. 基础选择器

   • * 通用元素选择器
   • # id选择器
   • .class 类选择器
   • element 标签选择器

2. 属性选择器

   • E[attr] 匹配所有具有属性attr的元素
   • E[attr=value] 匹配所有属性attr的值为value的元素
   • E[attr^value] 匹配属性attr的值以value开头的元素
   • E[attr$value] 匹配属性attr的值以value结尾的元素

3. 伪类选择器

   • E:first-child 匹配元素E的第一个子元素
   • E:hover 匹配鼠标悬停的元素
   • E:link 匹配所有未被点击的链接
   • E:visited 匹配所有已被点击的链接
   • E:focus 匹配获得当前焦点的元素
   • E:active 匹配鼠标已经按下还未释放的元素
   • E:enable 匹配表单中可用的元素
   • E:disable 匹配表单中禁用的元素
   • E:checked 匹配所有已被选择的radio和checkbox元素
   • E:first-of-type 匹配父元素下使用同种标签的第一个子元素

4. 组合选择器

   • E F 后代选择器
   • E+F 直接相邻选择器
   • E>F 子元素选择器
   • E~F 普通相邻选择器

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

优先级从高到低依次是：

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

复杂场景下的计算：

• 根据组合选择器按照以下规则统计各类选择器的个数：
  行内样式 --> 统计值为a
  ID选择器 --> 统计值为b
  类、属性选择器、伪类选择器 --> 统计为c
  标签选择器、伪元素选择器 --> 统计为d
• 先比较a值的大小，a值大的则优先级高;如果a值相等，则再比较b值的大小，b值大的优先级高；如果b值相等，则比较c值的大小，c值大的优先级高；如果c值相等，则比较d值的大小，d值大的优先级高；

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

未点击链接前，link伪类长期处于激活状态，鼠标悬停（或点击）时，a链接同时处于link和hover(或active)状态，由于它们特指度相同，在同时激活的情况下，后出现的伪类样式会覆盖前面的伪类样式，故link状态必须写在hover(或active)之前。
若把hover放在active后面，当点击链接一瞬，实际你在激活active状态的同时触发了hover伪类,hover在后面覆盖了active的颜色，所以无法看到active的颜色。故hover在active之前。
若把visited放在hover后面，那已访问过的链接一直触发着visited伪类，会覆盖hover样式。
最后，其实link、visited两个伪类之间顺序无所谓。（因为它俩不可能同时触发，即又未访问同时又已访问。）

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

• #header{} 匹配id为header的元素
• .header{} 匹配class为header的元素
• .header .logo{} 匹配class为header的所有class为logo的后代元素
• .header.mobile{} 匹配class="header mobile"的元素
• .header p, .header h3{} 匹配class="header"元素的后代p元素和后代h3元素
• #header .nav>li{} 匹配id="header"元素的后代中class="nav"的元素的li子元素
• #header a:hover{} 匹配id="header"元素的后代中a元素的hover状态
• #header .logo~p{} 匹配id="header"元素的后代中class="logo"的元素相邻p元素
• #header input[type="text"]{} 匹配id="header"元素的后代中type="text"的input元素

列出你知道的伪类选择器

• E:first-child 匹配元素E的第一个子元素
• E:hover 匹配鼠标悬停的元素
• E:link 匹配所有未被点击的链接
• E:visited 匹配所有已被点击的链接
• E:focus 匹配获得当前焦点的元素
• E:active 匹配鼠标已经按下还未释放的元素
• E:enable 匹配表单中可用的元素
• E:disable 匹配表单中禁用的元素
• E:checked 匹配所有已被选择的radio和checkbox元素
• E:first-of-type 匹配父元素下使用同种标签的第一个子元素

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

• div:first-child 匹配的是div元素的第一个子元素
• div:first-of-type 指定父元素的首个div元素

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

<style>
.item1:first-child{
  color: red;
}
.item1:first-of-type{
  background: blue;
}
</style>
 <div class="ct">
   <p class="item1">aa</p>
/*类名为item1的父元素下的第一个子元素，所以符合样式规则1；
类名为item1的父元素下的第一个p元素，所以也匹配样式规则2*/
   <h3 class="item1">bb</h3>
/*类名为item1的父元素下的第二个子元素，所以不符合样式规则1；
类名为item1的父元素下的第一个h3元素，所以匹配样式规则2*/
   <h3 class="item1">ccc</h3>
/*类名为item1的父元素下的第三个子元素，所以不符合样式规则1；
类名为item1的父元素下的第二个h3元素，所以也不匹配样式规则2*/
 </div>