CSS 选择器详细分类

前言

本文详细记录 CSS 各种选择器，对选择器进行了分类整理，若有遗漏的选择器后续会更新上

本文仅是对 CSS 所有选择器做一个概括，详细用法不做过多描述，比较重要的类型选择器会另外写文章做详细总结

1. 简单选择器

通配符选择器

使用 * 匹配页面中所有标签，通配符选择器 又称为 全局选择器

* {}

标签选择器

标签选择器 又称为 元素选择器、类型选择器、html 选择器

div {}
span {}

类选择器

用于找到所有该类名的标签，class 值可以重复

.box {}

id选择器

找到拥有该 id 值的标签，同一个页面中 id 值不能重复

#box {}

群组选择器

群组选择器 又称为 分组选择器，用于选中多个选择器，优化冗余的 CSS 样式代码

选择器1,选择器2 {}

后代选择器

后代选择器 又称为 派生选择器，找到指定标签的所有后代标签

选择器1 选择器2 {}

子代选择器

子代选择器用于找到指定标签的所有直接子元素标签

选择器1 > 选择器2 {}

交集选择器

交集选择器是指标签选择器和 id 或 class 选择器配合使用。

并集选择器的作用: 提高选择器的权重，更加精准的选择指定标签

标签名.class值 {}
标签名.id值 {}

2. 兄弟选择器

相邻兄弟选择器

相邻兄弟选择器用于选中紧跟着的一个兄弟

特别注意: 字符实体不是标签，不影响相邻关系

选择器1 + 选择器2 {}

通用兄弟选择器

通用兄弟选择器 又称为 一般兄弟选择器，用于选中后面所有兄弟

选择器1 ~ 选择器2 {}

可使用下面代码测试相邻兄弟选择器与通用兄弟选择器的区别

<style>
    /* 相邻兄弟选择器 */
    p+p {
        color: red;
        font-size: 25px;
        font-weight: bold;
    }
    /* 通用兄弟选择器 */
    p~p {
        color: red;
        font-size: 25px;
        font-weight: bold;
    }
</style>
<main>
    <p>1</p>
    <p>2</p>
    <span>3</span>
    <p>4</p>
    <p>5</p>
    <span>6</span>
</main>

3. 属性选择器

属性名选择器

以属性名匹配元素，属性名不能用引号引起来

/* 格式 */
[属性名] {}
/* 示例: 选中具有 type 属性的标签 */
[type] {}

属性值选择器

选中具有指定属性名和值的元素，属性值可以不用引号引起来，但是如果属性值是以数字开头时则必须使用引号

语法格式:

[attr=value] {}
[attr="value"] {}

属性值开头选择器

属性值开头匹配选择器: attr 的值以 value 开头

<style>
    [class^="box"] {
        color: red;
    }
</style>
<div class="box1">1</div>
<div class="box2">2</div>
<div>3</div>

属性值结尾选择器

属性值结尾匹配选择器: attr 的值以 value 结尾

[attr$="value"] {}

属性值模糊匹配选择器

属性值模糊匹配选择器 又称为 税性质模糊匹配选择器，匹配 attr 属性值包含 value 的元素

[attr*="value"] {}

单个属性值匹配选择器

用于匹配多属性中的单个属性值，只有一个属性值也能匹配到: attr 包含独立的单词 value, 必须用空格分开

[attr~="value"] {}

使用示例:

<style>
    [class~="box"] {
        color: red;
    }
</style>
<div class="box">1</div>
<div class="box item1">2</div>

分割属性值匹配选择器

匹配满足下面条件的元素: attr 的值以 value 开头，必须用 - 分开单词,比如 value-*

[attr|="value"] {}

使用示例:

<style>
    [class|="box"] {
        color: red;
    }
</style>
<div class="box-abc">1</div>
<div class="box-item1">2</div>

标签属性选择器

标签选择器和属性选择器的结合用法

标签名[属性选择器] {}

使用示例

input[name] {}
span[class|="box"] {}

4. 伪类选择器

静态链接伪类

静态链接伪类有: link（未访问的状态）、visited（访问后的状态），是超链接特有的伪类。开发中用的比较少

a:link {
    color: red;
}
a:visited {
    color: blue;
}

动态链接伪类

动态链接伪类: focus（获取焦点）、hover（鼠标滑过）、active（鼠标激活，链接被按下）

active 必须写在 hover 的后面，否则 active 会失效

超链接如果有多个选择器，需按照上面的顺序设定，否则会有 css 样式无法加载（与选择器的优先级有关）

div:hover {
    background: lightcoral;
}
input:focus {
    background: lightcoral;
}
a:active {
    font-weight: bold;
    color: blueviolet;
}

目标链接伪类

目标链接伪类: target，是 CSS 3 中新增的。突出显示被激活的锚点元素，也就是给被激活的锚点设置样式

div:target {
    font-size: 35px;
}

UI 元素状态伪类

UI 元素状态伪类选择器 用于 表单元素

结构伪类选择器

child 系列 (css2)

of-type 系列 (css3)

child 系列和 of-type 系列中 n 的取值

1. 非零的正整数: 1、2、3
2. 英文单词: odd(奇数)、even(偶数)
3. 公式 an + b: a 倍数 n 计数器，从 0 开始的整数，b 偏移量

选中第 1、4、7、10、… 个元素

div:nth-child(3n+1) {}

empty 空元素选择器

匹配没有子元素的元素，空元素: 标签中没有内容的元素

div:empty {}

否定伪类选择器

否定伪类用法: not(选择器) {}

将指定选择器排除在外，圆括号中的选择器只能是简单选择器

div:not(.box) {}