CSS选择器 | 小吉崽汁の窝

基本选择器

CSS 基本选择器用于选择 HTML 文档中的元素并应用样式

通配选择器

可以选中所有的 HTML 元素

* {
  color: orange;
  font-size: 40px;
}

备注：目前来看通配选择器貌似有点鸡肋，但后面清除样式时，会对我们有很大帮助

元素选择器

为页面中某种元素统一设置样式

h1 {
  color: orange;
  font-size: 40px;
}

备注：元素选择器无法实现差异化设置，例如上面的代码中，所有的 h1 元素效果都一样

类选择器

根据元素的 class 值，来选中某些元素。class 翻译过来有：种类，类别的含义，所以 class 值，又称：类名

1
2
3

.speak {
  color: red;
}

注意点：

元素的 class 属性值不带 . ，但 CSS 的类选择器要带 .
class 值，是我们自定义的，按照标准：不要使用纯数字，不要使用中文，尽量使用英文与数字的组合，若由多个单词组成，使用 - 做连接，例如： left-menu ，且命名要有意义，做到 "见名知意"
一个元素不能写多个 class 属性，下面是错误示例：

1 2	<!-- 该写法错误，元素的属性不能重复，后写的会失效 --> <h1 class="speak" class="big">你好啊</h1>

一个元素的 class 属性，能写多个值，要用空格隔开，例如：

1 2	<!-- 该写法正确，class属性，能写多个值 --> <h1 class="speak big">你好啊</h1>

ID选择器

根据元素的 id 属性值，来精准地选中某个元素

#earthy {
  color: red;
  font-size: 60px;
}

注意：

id 属性值：尽量由字母，数字，下划线( _ )、短杠( - )组成，最好以字母开头，不要包含空格，区分大小写
一个元素只能拥有一个 id 属性，多个元素的 id 属性值不能相同
一个元素可以同时拥有 id 和 class 属性

总结

基本选择器	特点	用法
通配选择器	选中所有标签，一般用于清除样式	`* {color:red}`
元素选择器	选中所有同种标签，但是不能差异化选择	`h1 {color:red}`
类选择器	选中所有特定类名（ `class` 值）的元素 — 使用频率很高	`.say {color:red}`
ID 选择器	选中特定 `id` 值的那个元素（唯一的）	`#earthy {color:red}`

复合选择器

复合选择器建立在基本选择器之上，由多个基础选择器，通过不同的方式组合而成
复合选择器可以在复杂结构中，快速而准确的选中元素

交集选择器

选中同时符合多个条件的元素。语法：选择器1选择器2选择器3......选择器n {}

1
2
3

p.beauty {
  color: blue;
}

注意：

有标签名，标签名必须写在前面
id 选择器、通配选择器，理论上可以作为交集的条件，但实际应用中几乎不用 — 因为没有意义
交集选择器中不可能出现两个元素选择器，因为一个元素，不可能即是 p 元素又是 span 元素
用的最多的交集选择器是：元素选择器配合类名选择器，例如： p.beauty

并集选择器

选中多个选择器对应的元素，又称：分组选择器。语法：选择器1，选择器2，选择器3，......选择器n {}

多个选择器通过 , 连接，此处 , 的含义就是：或

.rich,
.beauty {
  font-size: 40px;
  background-color: skyblue;
  width: 200px;
}

注意：

并集选择器，我们一般竖着写
任何形式的选择器，都可以作为并集选择器的一部分
并集选择器，通常用于集体声明，可以缩小样式表体积

后代选择器

选中指定元素中，符合要求的后代元素。语法：选择器1 选择器2 选择器3 ...... 选择器n {}（先写祖先，再写后代）

选择器之间，用空格隔开，空格可以理解为："xxx 中的"，其实就是后代的意思

/* 选中类名为subject元素中的所有类名为front-end的li */
.subject li.front-end {
  color: blue;
}

注意：

后代选择器，最终选择的是后代，不选中祖先
儿子、孙子、重孙子，都算是后代
结构一定要符合之前讲的 HTML 嵌套要求，例如：不能 p 中写 h1 ~ h6 。

子代选择器

选中指定元素中，符合要求的子元素（儿子元素）。（先写父，再写子）。子代选择器又称：子元素选择器，子选择器。语法：选择器1 > 选择器2 > 选择器3 > ...... > 选择器n {}

选择器之间，用 > 隔开， > 可以理解为："xxx 的子代"，其实就是儿子的意思

1
2
3

.persons > a{
  color: red;
}

注意：

子代选择器，最终选择的是子代，不是父级
子、孙子、重孙子、重重孙子 …… 统称后代！，子就是指儿子

兄弟选择器

相邻兄弟选择器：

作用：选中指定元素后，符合条件的相邻兄弟元素。所谓相邻，就是紧挨着他的下一个，简记：睡在我下铺的兄弟
语法： 选择器1 + 选择器2 {}
示例：

/* 选中div后相邻的兄弟p元素 */
div + p {
  color:red;
}

通用兄弟选择器：
1. 作用：选中指定元素后，符合条件的所有兄弟元素。（简记：睡在我下铺的所有兄弟）
2. 语法：选择器1 ~ 选择器2 {}
3. 示例：

/* 选中div后的所有的兄弟p元素 */
div ~ p {
  color:red;
}

注意：两种兄弟选择器，选择的是下面的兄弟

属性选择器

选中属性值符合一定要求的元素。语法：

[属性名] 选中具有某个属性的元素
[属性名="值"] 选中包含某个属性，且属性值等于指定值的元素
[属性名^="值"] 选中包含某个属性，且属性值以指定的值开头的元素
[属性名$="值"] 选中包含某个属性，且属性值以指定的值结尾的元素
[属性名*=“值”] 选择包含某个属性，属性值包含指定值的元素

/* 选中具有title属性的元素 */
div[title] {
  color:red;
}

伪类选择器

选中特殊状态的元素。常用的伪类选择器：

动态伪类

:link 超链接未被访问的状态
:visited 超链接访问过的状态
:hover 鼠标悬停在元素上的状态
:active 元素激活的状态
:focus 获取焦点的元素

结构伪类

:first-child 所有兄弟元素中的第一个
:last-child 所有兄弟元素中的最后一个
:nth-child(n) 所有兄弟元素中的第 n 个
:first-of-type 所有同类型兄弟元素中的第一个
:last-of-type 所有同类型兄弟元素中的最后一个
:nth-of-type(n) 所有同类型兄弟元素中的第n个

关于 n 的值：

0 或不写：什么都选不中 — 几乎不用。
n 选中所有子元素 — 几乎不用。
1 ~ 正无穷的整数：选中对应序号的子元素。
2n 或 even：选中序号为偶数的子元素。
2n+1 或 odd：选中序号为奇数的子元素。
-n+3：选中的是前 3 个。

了解即可
1. :nth-last-child(n) 所有兄弟元素中的倒数第 n 个
2. :nth-last-of-type(n) 所有同类型兄弟元素中的倒数第n个
3. :only-child 选择没有兄弟的元素（独生子女）
4. :only-of-type 选择没有同类型兄弟的元素
5. :root 根元素
6. :empty 内容为空元素（空格也算内容）

否定伪类

:not(选择器) 排除满足括号中条件的元素

UI伪类

:checked 被选中的复选框或单选按钮
:enable 可用的表单元素（没有 disabled 属性）
:disabled 不可用的表单元素（有 disabled 属性）

目标伪类（了解）

:target 选中锚点指向的元素

语言伪类（了解）

:lang() 根据指定的语言选择元素（本质是看 lang 属性的值）

伪元素选择器

选中元素中的一些特殊位置。常用伪元素：

::first-letter 选中元素中的第一个文字
::first-line 选中元素中的第一行文字
::selection 选中被鼠标选中的内容
::placeholder 选中输入框的提示文字
::before 在元素最开始的位置，创建一个子元素（必须用 content 属性指定内容）
::after 在元素最后的位置，创建一个子元素（必须用 content 属性指定内容）

选择器的优先级（权重）

通过不同的选择器，选中相同的元素，并且为相同的样式名设置不同的值时，就发生了样式的冲突。到底应用哪个样式，此时就需要看优先级了。

行内样式 > ID选择器 > 类选择器 > 元素选择器 > 通配选择器

计算方式：每个选择器，都可计算出一组权重，格式为： (a,b,c)
1. a : ID 选择器的个数。
2. b : 类、伪类、属性选择器的个数。
3. c : 元素、伪元素选择器的个数。
比较规则：按照从左到右的顺序，依次比较大小，当前位胜出后，后面的不再对比
特殊规则：
1. 行内样式权重大于所有选择器
2. !important 的权重，大于行内样式，大于所有选择器，权重最高！