选择器

选择器种类

标签选择器

<div>
    <span>选择器</span>
</div>

<style type="text/css">
span {
    color: red;
}
</style>

类选择器

<div>
    <span class="my-span">选择器</span>
</div>

<style type="text/css">
.my-span {
    color: red;
}
</style>

id选择器

<div>
    <span id="my-span">选择器</span>
</div>

<style type="text/css">
#my-span {
    color: red;
}
</style>

通用选择器

<div>
    <h1>h1</h1>
    <p>p</p>
    <span>span</span>
</div>

<style type="text/css">
* {
    color: red;
}
</style>

属性选择器

假设元素内设置了data-attr="value1 value2 value3"，下面介绍对它使用属性选择器的几种方式：

• [data-attr]：根据属性名称；
• [data-attr="value1 value2 value3"]：根据属性名和属性值；
• [data-attr^="val"]：以……开头；
• [data-attr*="value2"]：包含……；
• [data-attr$="3"]：以……结尾。

<div>
    <span data-attr="value1 value2 value3">选择器</span>
</div>

<style type="text/css">
[data-attr] {
    color: red;
}

[data-attr="value1 value2 value3"] {
    color: red;
}

[data-attr^="val"] {
    color: red;
}

[data-attr*="value2"] {
    color: red;
}

[data-attr$="3"] {
    color: red;
}
</style>

选择器使用规则

选择器的组合使用：

• div, span：同时选择<div>和<span>元素；
• div.classValue：选择class属性值包含classValue的<div>元素；
• div#idValue：选择id属性值为idValue的<div>元素；
• div[data-attr]：选择具有data-attr属性的<div>元素；
• div.class1.class2：选择class属性值同时包含class1和class2的<div>元素。

---

根据结构来使用选择器：

• selector1 selector2：当selector2是selector1的后代元素时，选择selector2；
• selector1 > selector2：当selector2是selector1的子元素时，选择selector2；
• selector1 + selector2：当selector2是selector1的同胞元素，且selector2紧跟着selector1时，选择selector2；
• selector1 ~ selector2：当selector2是selector1的同胞元素，且selector2位于selector1后面时，选择selector2；
• selector1 * selector2：当selector2是selector1的后代元素，且selector2不是selector1的子元素时，选择selector2。

伪类和伪元素

MDN上伪类和伪元素的总结

• 伪类用于给已经存在于文档树中的元素添加不存在的类，并为其添加样式；
• 伪元素用于创建文档树中不存在的元素，并为其添加样式。

样式层叠

样式来源

以下就是浏览器层叠各个来源样式的顺序：

• 浏览器默认样式表
• 用户样式表
• 作者链接样式表（按照它们链接到页面的先后顺序）
• 作者嵌入样式
• 作者行内样式

特指度

1. 100：ID选择器。
2. 10：类选择器、伪类选择器和属性选择器。
3. 1：标签选择器和伪元素。

层叠规则

1. 带有!import的优先级最高（开挂一样的存在）。
2. 行内样式优先级仅次于!import。
3. 抛开!import和行内样式，其他情况下，特指度大的优先级高。
4. 当特指度相同时，嵌入样式表 > 链接样式表 > 用户样式表 > 浏览器默认样式表。
5. 当特指度相同时，则后出现的优先级高。