揭秘CSS选择器：从基本到高级的逐一剖析

前端

2023-12-06 04:39:02

探索CSS选择器的世界：从入门到精通

CSS选择器是网页开发人员用来精准操控HTML元素的神兵利器，掌握它们对于打造赏心悦目的网页布局至关重要。在这篇文章中，我们将深入探究CSS选择器的奥秘，助你从新手蜕变为高手。

深入剖析CSS选择器

子元素选择器：精准定位

子元素选择器就像一柄利剑，可以直击某个元素的直接后代。它的语法为“父元素 > 子元素”，其中“父元素”是父元素的CSS选择器，“子元素”是子元素的CSS选择器。例如，div > p选择器会选中div元素的直接子元素p。

属性选择器：属性过滤器

属性选择器根据元素的属性值进行筛选。语法为“[属性名]”、“[属性名=属性值]”、“[属性名~=属性值]”、“[属性名^=属性值]”和“[属性名$=属性值]”。以下代码示例展示了它们不同的用法：

[class]：匹配拥有任何class属性的元素
[class=intro]：匹配class属性值为"intro"的元素
[class~=intro]：匹配class属性值包含"intro"的元素
[class^=intro]：匹配class属性值以"intro"开头的元素
[class$=intro]：匹配class属性值以"intro"结尾的元素

伪类选择器：状态探测

伪类选择器根据元素的状态进行筛选，它们包括：

:hover：鼠标悬停在元素上方时触发
:focus：元素获得焦点时触发
:active：元素被激活时触发
:checked：元素被选中时触发
:disabled：元素被禁用时触发

以下代码示例演示了伪类选择器的用法：

p:hover { color: red; }：当鼠标悬停在p元素上时，其文字颜色变为红色
input:focus { border: 2px solid blue; }：当input元素获得焦点时，其边框变成蓝色实线，宽度为2px

伪元素选择器：内容操作

伪元素选择器可以用来操控元素的特定部分，它们包括：

::first-line：选择元素的第一行
::first-letter：选择元素的第一个字母
::before：在元素内容之前插入内容
::after：在元素内容之后插入内容

以下代码示例展示了伪元素选择器的用法：

p::first-line { text-transform: uppercase; }：将p元素的第一行文字转换为大写
p::first-letter { font-size: 1.5em; }：将p元素的第一个字母字体大小增加到1.5倍
p::before { content: "Intro: "; }：在p元素内容之前插入"Intro: "文本

CSS选择器大全

以下表格总结了常用的CSS选择器及其示例：

选择器		示例
*	匹配任何元素	* { color: red; }
E	匹配元素E	p { color: red; }
E.class	匹配具有class类的元素E	p.intro { color: red; }
E#id	匹配具有id的元素E	p#intro { color: red; }
E > F	匹配是E直接子元素的F	div > p { color: red; }
E F	匹配是E后代的F	div p { color: red; }
[attribute]	匹配具有attribute属性的元素	p[class] { color: red; }
[attribute=value]	匹配具有attribute属性且值为value的元素	p[class=intro] { color: red; }
[attribute~=value]	匹配具有attribute属性且值包含value的元素	p[class~=intro] { color: red; }
[attribute^=value]	匹配具有attribute属性且值以value开头的元素	p[class^=intro] { color: red; }
[attribute$=value]	匹配具有attribute属性且值以value结尾的元素	p[class$=intro] { color: red; }
:hover	匹配鼠标悬停在上面的元素	p:hover { color: red; }
:focus	匹配获得焦点的元素	input:focus { color: red; }
:active	匹配被激活的元素	button:active { color: red; }
:checked	匹配被选中的元素	input:checked { color: red; }
:disabled	匹配被禁用的元素	input:disabled { color: red; }
::first-line	匹配元素的第一行	p::first-line { color: red; }
::first-letter	匹配元素的第一个字母	p::first-letter { color: red; }
::before	在元素内容之前插入内容	p::before { content: "Intro"; }
::after	在元素内容之后插入内容	p::after { content: "Intro"; }