CSS学习（6）- 组合器，伪类和伪元素

type

status

date

slug

summary

CSS组合器

组合器是解释选择器之间关系的某种机制。

CSS 中有四种不同的组合器：

后代选择器 (空格)

子选择器 (>)

相邻兄弟选择器 (+)

通用兄弟选择器 (~)

后代选择器

我们之前最常用的方式就是后代选择器，其语法如下：

指定div元素的所有后代（使用了空格）

本例中我们选择的便是div的p元素后代。

子选择器

子选择器与后代选择器的区别在于：

子选择器选择的是直接的子，后代选择的是全部的子

我们会发现如果一个元素的直接后代不是p，而是span，而span的直接后代才是p，则此条无效，不属于div的子选择器的范围。对于后代选择器来说是有效的。

相邻兄弟选择器

div + h1 表示的是 div和h1 属于同一兄弟，因此他表示的是在div后的h1元素的样式

通用兄弟选择器

显而易见，这个表示的就是 div ~ h1 ，即div的所有 h1兄弟都改变元素

CSS伪类

伪类用于定义元素的特殊状态。

一个最简单的伪类的使用方法：鼠标点击链接变色

hover 一定要在 link 和 visited 之后定义, active 一定要在 hover 之后定义。

first-child伪类

P:first-child 匹配任何元素的第一个子元素的第一个 p

示例：强调所有的文本中的首个的 “你干嘛” 关键词

同理，如果我们需要强调首个文本中的所有关键词：

lang伪类

为不同的语言定义特殊的规则

quote 表示设置不同的引号类型

我们为They are difference! 设置了不同的引号类型。

参考手册：

CSS 伪类

https://www.w3school.com.cn/css/css_pseudo_classes.asp

伪元素

伪元素用于设置元素指定部分的样式

::first-line 伪元素用于向文本的首行添加特殊样式。

::first-letter 伪元素用于向文本的首字母添加特殊样式。

::before伪元素可用于在元素内容之前插入一些内容。

::after伪元素可用于在元素内容之后插入一些内容。

::selection伪元素匹配用户选择的元素部分。

为每个h1标题的前面都添加一个表情：

::selection 更改选择文本的样式

Yuleo