伪类选择器
伪类选择器是一种允许通过未包含在 HTML 元素的状态信息来定位 HTML 元素的用法。伪类选择器的具体用法就是向已有的选择器增加关键字,表示定位的 HTML 元素的状态信息。
伪类选择器的语法结构如下所示:
|
伪类选择器的具体语法格式为 :伪类
,这里一定不要忘记 :
。
说明:CSS 允许在同一个选择器上同时编写多个伪类选择器。
伪类选择器种类
提示:上图由 MDN 网站提供。
伪类选择器的数量这么多,为了更好地梳理伪类选择器,我们可以按照用途的不同分为如下 5 种类型:
- 动态伪类选择器:常与 “ 元素配合使用,用来表示用户的某种行为状态。
- 目标伪类选择器:常与 “ 元素配合使用,用来定位当前 HTML 页面中唯一一个目标元素。
- 元素状态伪类选择器:常与表单组件元素配合使用,用来表示表单组件的某种状态。
- 结构伪类选择器:常与 “ 元素配合使用,利用 HTML 元素之间的关系定位目标元素。
- 否定伪类选择器:用来定位与指定选择器不匹配的 HTML 元素。
否定伪类选择器
|
否定伪类选择器的作用是用来定位不匹配 selector
选择器定位的 HTML 元素的元素。可能这句话看起来比较绕,不太好懂。
注意:
- 可以利用这个伪类提高规则的优先级。例如,
#foo:not(#bar)
和#foo
会匹配相同的元素。 但是前者的优先级更高。 -
:not(foo)
将匹配任何非 foo 元素,包括 html 和 body 元素。 - 这个选择器只会应用在一个元素上,你无法用它排除所有父元素。
此内容摘自 MDN 网站的否定伪类选择器文章
伪元素选择器
CSS 中伪元素选择器的用法与伪类选择器的用法类似,都是在指定 CSS 选择器增加关键字。但这两者的作用并不相同,伪类选择器是用来描述某个指定元素的状态信息,而伪元素选择器是用来描述某个指定元素的特定部分设定样式。
伪元素选择器的语法结构如下所示:
|
伪元素选择器的语法格式为 ::伪元素
,一定不要忘记 ::
。
目前 CSS 提供的伪元素选择器的数量如下所示:
::before 和 ::after 伪元素
::before 伪元素的作用是作为定位的 HTML 元素的第一个子级元素
|
::after 伪元素的作用是作为定位的 HTML 元素的最后一个子级元素。
|
内容生成
content
属性用于在元素的 ::before
伪元素和 ::after
伪元素中插入内容。该属性具有的值如下所示:
- none:不会产生伪类元素。
- normal:
::before
伪元素和::after
伪类元素中会被视为 none。 - text:文本内容。
- url:格式为
url()
,指定一个外部资源(比如图片)。如果该资源或图片不能显示,它就会被忽略或显示一些占位。
由 content
属性增加的内容默认情况下为内联元素(有关内联元素的内容会在后续章节中进行详细讲解)。
::first-letter 伪元素
::first-letter 伪元素的作用是为匹配元素的文本内容的第一个字母设置样式内容
|
参看 MDN 网站的 ::first-letter 伪元素文章
::first-line 伪元素
::first-line 伪元素的作用是为匹配 HTML 元素的文本内容的第一行设置样式内容
::selection 伪元素
::selection 伪元素的作用是匹配用户在 HTML 页面选中的文本内容(比如使用鼠标或其他选择设备选中的部分)设置高亮效果
|
只有一小部分 CSS 属性可以用于::selection
伪元素:
- color 属性
- background-color 属性
- cursor 属性
- caret-color 属性
- outline 属性
- text-decoration 属性
- text-emphasis-color 属性
- text-shadow 属性