Class 和 Id 的使用场景

• Class:一个标签可以有多个class且同一个class可以被多个标签共同使用。这样便于在CSS中集体控制样式。
• ID：一个标签只能有一个ID且不同标签ID不可相同，具有唯一性，在CSS中针对性控制样式。

CSS选择器常见的有几种

CSS中常见的选择器有：基础选择器、组合选择器、属性选择器、伪类选择器、伪元素选择器，5种。

• 基础选择器

• 组合选择器

.class1.class2或element#id，没有间隔符号，自身的“.”或“#”充当，表示既···又···

• 属性选择器

• 伪类选择器

• 伪元素选择器

选择器的优先级

• 优先级由高到低：(注：继承的优先级最低)

1. !important：在属性后面使用，会覆盖页面内任何位置定义的元素样式
2. 内联样式：作为style属性写在标签上的
3. id选择器（#ID）
4. class选择器（.class）
5. 伪类选择器（a:hover）
6. 属性选择器（E[attr]）
7. 标签选择器（<h1 p a>）
8. 通用元素选择器
9. 浏览器自定义

• 复杂场景
• 首先
  行内样式 <div style="xxx"></div> ==> a
  ID 选择器 ==> b
  类，属性选择器和伪类选择器 ==> c
  标签选择器、伪元素 ==> d
• 然后：
  a>b>c>d
  同级则比较数目
• 再次声明！继承的优先级最低！
  例：
  如图，加了“！important”的id选择器样式被标签选择器覆盖了

ID选择器样式被覆盖.png

这是因为id选择器只是给它的父元素给字体大小，里面的子元素可以继承 ，而属性的继承优先级是最低的，所以被覆盖了。
此时审查元素，

审查元素.png

发现字体大小已经被划掉了，同时注意标题inherited from ——继承自。
以上。

• 同类标签对同一元素进行样式操作，后面的覆盖前面的。

a标签的伪类选择器的定义、顺序及原因

• 定义：同类标签对同一元素进行样式操作，后面的覆盖前面的。
• 正确顺序：

a:link {
    color: blue;
}
a:visited {
    color: black;
}
a:hover {
    color: yellow;
}
a:active {
    color: red;
}

• 解释：
• 未进行任何操作，为link；点击过后，为visited；鼠标悬停，为hover；点击时刻，为active。
• 根据原则，link应为最上面的，否则，会持续覆盖其上面的其他样式。
• 若链接已点击过，而visited又在active或hover下面，会导致对应样式被覆盖，故visited应排第二。
• 若hover在active下面，则会出现情况：当点击时，鼠标同时悬浮在链接上，此时想要的情况是：点击时看到链接变黄色。但由于下覆盖上，无法得到效果，故hover在active之上，排第三。
• 综上，从上到下依次为：link——visited——hover——active。

以下选择器含义

辨析

• 释意

• div:first-child：匹配作为长子（第一个子女）的div。

• div:first-of-type：匹配其父元素下使用同种标签的第一个div元素。

• div :first-child：匹配div下的后代元素，且为每个父元素下的第一个子元素。

• div :first-of-type：匹配div下的后代元素，且为每个父元素下使用同种标签的第一个子元素。

• 实例

• div:first-child

  
  
  1.png

如图，①div-1系列全红，说明有“遗传性”；②div-2中只有2-1红，说明是每级第一个；③div-3中全黑，说明不是同类第一而应是父标签下第一（且为div标签）。即匹配作为长子（第一个子女）的div。

• div:first-of-type

  
  
  2.png
  
  

  如图，与div:first-child相比，div-3-1变红，说明这个是各级div中同类型第一个。即匹配其父元素下使用同种标签的第一个div元素。

• div :first-child

  
  
  3.png

如图，与div:first-child相比，第一组只有1-1红，第三组span变红。说明匹配的是div下的后代元素，且为每个父标签下的第一个子元素（不限制类型）。

• div :first-of-type

  
  
  4.png

如图,与div :first-child（注意空格）相比，3-1变红。说明匹配的是div下的后代元素，且为每个父元素下使用同种标签的第一个子元素。

解释下图代码展示的效果

最后一题效果图.png

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

匹配class="item1"的父元素（div class="ct"）下的第一个且类是.item1的子元素，即p class="item1"，故只有aa变红。

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

匹配class="item1"的父元素（div class="ct"）下，类是.item1且为每种标签第一个的子元素，即p标签的第一个（p class="item1"）和h3标签的第一个（h3 class="item1"），故aa和bb都有蓝色背景。