CSS选择器

1.class 和 id 的使用场景?

class是类，用于CSS，可以多个HTML标签复用。id是HTML标签的唯一身份证，具有唯一性，只允许出现一次，可以用于CSS，也可以用于JS。但一般在实际的开发中，class用于CSS，id则用于JS。

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

• id选择器，HTML: <div id="head"></div>，CSS: #head{color: red;}。
• 类选择器，HTML:<div class="head"></div>，CSS: .head{color: red;}。
• 标签选择器，HTML:<div id="head"></div>，CSS: div{color: red;}。
• 伪类选择器，HTML:<div class="head"></div>，
  CSS:
  .head::before{color: red;}，在.head上方增加一个行内元素。
  .head::after{color: red;}，在.head下方增加一个行内元素。
  .head:first-child{color: red;}，class为head的元素的父元素下的第一个子元素。
  .head:last-child{color: red;}，class为head的元素的父元素下的最后一个子元素。
  .head:first-of-type{color: red;}，class为head的元素的父元素下的同种类型元素中的第一个子元素。
  .head:last-of-type{color: red;}，class为head的元素的父元素下的同种类型元素中的最后一个子元素。
  .head:nth(n)-child{color: red;}，class为head的元素的父元素下的第n个子元素。
  所以其实这里的child代表后代，type代表标签类型。
• 组合选择器，HTML:

<div>
        <p>123</p>
        <section><p>456</p></section>
    </div>

CSS:div p{color: red;},这是所有后代选择器，中间以一个空格连接，凡是div标签后代中的P标签，都会被选择，所以这里的123和456都会变红。div>p{color: red;}，这是直接后代选择器，使用 " > " 连接，只有div标签下的第一代p标签才会被选中，所以这里只有123会变红。

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

优先级顺序，从上到下，依次递减：
1.!important
2.内联样式
3.id选择器
4.class选择器
5.标签选择器
6.伪类选择器
在复杂场景下，一般先分别计算各个选择器的优先级权重，然后相加得出和，权重值之和越大，优先级越高。

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

顺序依次为a:link > a:hover > a:active > a:visited。
a:link为标签初始状态，未经过任何操作。a:hover是光标经过标签时的状态。a:active是鼠标点击标签并且还未松开点击按键时的状态 。a:visited是点击标签之后，松开按键，然后光标离开标签之后的状态。可以使用love hate的方式来记忆，用爱包裹恨，即L(H A)V.

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

选择器.png

• 1为选择id为header的标签。
• 2为选择class为header的标签。
• 3为选择class为header并且后代class为logo的标签。
• 4为选择class为header或者class为mobile的标签，因为 “ . ” 和 “ # ”也可以作为分隔符。
• 5其实是将两个组合选择器的缩写形式，他们共用一个样式，选择class为header并且后代元素为p标签的标签，另外一个是选择class为header并且后代元素为h3标签的标签。
• 6为选择id为header并且后代元素的class为nav的标签的直系后代为li标签的标签。
• 7为选择id为header并且后代元素为a标签的标签，当鼠标光标经过该标签时，执行其中的样式。
• 8为选择id为header并且后代元素的class为logo的标签的所有兄弟p标签。
• 9为选择id为header并且后代元素为input标签并且该标签的属性type=text。

我所知道的伪类选择器如下：

• ::before,相当于在标签的上方加一个span。
• ::after,相当于在标签的下方加一个span。
• ::selection，被光标选择的元素。
• :first-child,满足冒号左侧条件下的元素的父元素下的第一个满足冒号左侧条件的子元素。
• :last-child,满足冒号左侧条件下的元素的父元素下的最后一个满足冒号左侧条件的子元素。
• :first-of-type,满足冒号左侧条件下的元素的父元素下的同种类型元素（意思就是同一种HTML标签）中的第一个满足冒号左侧条件的子元素。
• :last-of-type,满足冒号左侧条件下的元素的父元素下的同种类型元素（意思就是同一种HTML标签）中的最后一个满足冒号左侧条件的子元素。
• :nth(n)-of-child,满足冒号左侧条件下的元素的父元素下的第n个(n其实是个表达式，也可改成其他的表达式，比如2n+1)满足冒号左侧条件的子元素。
• :nth(n)-of-type,满足冒号左侧条件下的元素的父元素下的同种类型元素（意思就是同一种HTML标签）中的第n个(n其实是个表达式，也可改成其他的表达式，比如2n+1)满足冒号左侧条件的子元素。
• 还有a标签所特有的伪类选择器：上面已经答过了，这里就不再过多重复了。

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

• 第一个为div标签的父元素下的第一个div标签。
• 第二个为div标签的父元素下的同种类型标签下的第一个类型为div标签的元素。
• 第三个为div标签的后代子元素中的父元素下的第一个子元素。
• 第四个为div标签的后代子元素的父元素下的同种类型标签下的第一个子元素。

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

代码.png

aa字体变红，背景色变蓝。
bb仅背景色变蓝。
ccc无变化。
分析如下：
首先第一个样式，

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

找到class为item1的元素的父元素，然后在该父元素下寻找第一个子元素，所以aa字体变红。
然后第二个样式，

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

同样的，找到class为item1的元素的父元素，然后在该父元素下的同一种标签中，寻找第一个子元素，发现p标签的第一个，h3标签的第一个满足条件，所以aa,bb的背景色变蓝。
最后，the ending。