CSS所有选择器的作用与使用示例
文章目录
前言
了解CSS（层叠样式表）所有选择器的用法，并列出基础示例。
一、CSS所有选择器的作用
1. 基础选择器
-
元素选择器（标签选择器）: 选择所有指定元素。
- 描述：根据HTML元素的名称来选择元素。例如，
p选择器会选择所有的<p>元素。 - 示例：
p { color: red; }会将所有<p>元素的文字颜色设置为红色。p { color: red; }
- 描述：根据HTML元素的名称来选择元素。例如，
-
类选择器（
.开头）: 选择所有具有指定类的元素。- 描述：通过类名找到对应的元素。例如，通过HTML元素的
class属性来选择元素，类选择器以点号.开头，后跟类名。类名以.开头，如.my-class。 - 示例：
.classselect { background: red; }会选择所有class="classselect"的元素，并将它们的背景色设置为红色。.classselect { background: red; } ```
- 描述：通过类名找到对应的元素。例如，通过HTML元素的
-
ID选择器（
#开头）: 选择具有指定ID的元素。- 描述：通过ID名找到对应的元素，ID选择器以井号
#开头，后跟ID名，且每个ID在页面中应该是唯一的，如#my-id。 - 示例：
#idselect { height: 100px; }会选择id="idselect"的元素，并将其高度设置为100像素。#idselect { height: 100px; } ```
- 描述：通过ID名找到对应的元素，ID选择器以井号
2. 组合选择器
-
后代选择器（空格分隔）: 选择指定元素内部的所有符合条件的后代元素。
- 描述：通过空格分隔两个选择器，以选择第一个选择器的后代中符合第二个选择器的元素。
- 示例：
div p会选择所有<div>元素内的<p>元素。div p { color: blue; }
-
子元素选择器（
>分隔）: 选择指定元素的直接子元素。- 描述：使用
>符号分隔选择器，通过>符号选择直接子元素。 - 示例：
div > p会选择所有直接位于<div>元素内的<p>元素。div > p { color: red; }
- 描述：使用
-
相邻兄弟选择器（
+分隔）: 选择与指定元素在同一层级且紧接在它后面的元素。- 描述：使用
+符号分隔选择器，选择紧接在另一元素后的元素，且二者有相同的父元素。 - 示例：
h2 + p会选择紧跟在<h2>元素之后的<p>元素。h2 + p { color: green; }
- 描述：使用
-
通用兄弟选择器（
~分隔）: 选择与指定元素在同一层级的所有后续兄弟元素。- 描述：使用
~符号分隔选择器，选择某个元素之后的所有兄弟元素（共享相同父元素），而不仅仅是紧接在后面的元素。 - 示例：
h2 ~ p会选择所有与h2元素在同一层级的p元素。h2 ~ p { color: black; }
- 描述：使用
-
群组选择器（
，分隔）：允许您同时选择多个元素，并将相同的样式应用于它们。- 描述：允许同时选择多个选择器，并对它们应用相同的样式规则。群组选择器通过逗号
,分隔不同的选择器。 - 示例：
h1, h2, p { color: blue; }会将<h1>、<h2>和<p>元素的文字颜色都设置为蓝色。h1, h2, p { color: blue; }
- 描述：允许同时选择多个选择器，并对它们应用相同的样式规则。群组选择器通过逗号
3. 属性选择器
-
等于属性选择器(
[attribute="value"]): 选择具有指定属性且属性值完全等于指定值的元素。- 描述：根据元素的属性及属性值来选择元素。
- 示例：这个选择器会选择所有
<a>标签，其target属性值完全等于"_blank"。这意味着这些链接会在新标签页或新窗口中打开。a[target="_blank"] { color: red; }
-
包含属性选择器(
[attribute~="value"]): 选择属性值包含指定完整子串的元素。- 描述：实际上
[attribute~="value"]选择器用于选择属性值中包含一个完整单词value（单词之间由空格分隔）的元素。 - 示例：这个选择器会选择所有
<a>标签，其title属性值中包含单词"example"（注意，"example"必须是一个完整的单词，前后有空格分隔，除非它是属性值中的唯一单词）。a[title~="example"] { color: green; }
- 描述：实际上
-
起始属性选择器(
[attribute^="value"]): 选择属性值以指定子串开头的元素。- 描述：选择属性值以指定子串开头的元素。
- 示例：这个选择器会选择所有
<a>标签，其href属性值以"https"开头。这通常用于确保所有安全链接（HTTPS）都有特定的样式。a[href^="https"] { color: black; }
-
结尾属性选择器(
[attribute$="value"]): 选择属性值以指定子串结尾的元素。- 描述：选择属性值以指定子串结尾的元素。
- 示例：这个选择器会选择所有
<a>标签，其href属性值以".pdf"结尾。这可以用于给PDF文件链接添加特定的样式。a[href$=".pdf"] { color: blue; }
-
子串属性选择器(
[attribute*="value"]): 选择属性值包含指定子串的元素。- 描述：选择属性值中包含指定子串的元素（与
[attribute~="value"]不同，这里不需要完整的单词匹配）。 - 示例：这个选择器会选择所有
<a>标签，其href属性值中包含子串"example"。这意味着无论"example"出现在href的哪个位置，只要它作为子串存在，该链接就会被选中。a[href*="example"] { color: red; }
- 描述：选择属性值中包含指定子串的元素（与
4. 伪类选择器
- 动态伪类选择器：用于选择处于特定状态的元素。
:hover：当鼠标指针悬停在元素上时触发。:active：当元素被用户激活（例如点击）时触发，选择活动链接（鼠标点击未释放时的状态）。:focus：选择获得焦点的元素，如通过键盘或鼠标点击选中的元素。当元素获得焦点时触发，常见于输入框、按钮等。:visited：选择已访问过的链接。:link：选择未访问过的链接。
-
结构伪类选择器: 基于元素在文档树中的位置或与其他元素的关系来选择元素。选择文档树中特定结构的元素。
-
:first-child：选择父元素的第一个子元素。 -
:last-child：选择父元素的最后一个子元素。 -
:nth-child(n)：选择父元素的第n个子元素，n可以是数字、关键词（如"even"和"odd"）或公式（如2n+1）。 -
:nth-last-child(n)：类似于:nth-child(n)，但它是从最后一个子元素开始计数的。 -
:only-child：选择父元素仅有一个子元素，且该子元素匹配选择器的元素。 -
:first-of-type：选择父元素下相同类型元素的第一个子元素。 -
:last-of-type：选择父元素下相同类型元素的最后一个子元素。 -
:nth-of-type(n)：选择父元素下相同类型元素的第n个子元素。 -
:nth-last-of-type(n)：类似于:nth-of-type(n)，但它是从相同类型元素的最后一个子元素开始计数的。 -
:only-of-type：选择父元素下与其类型相同的唯一子元素。 -
:empty（空伪类）：选择没有任何子元素（包括文本节点）的元素。
-
-
表单伪类选择器: 用于表单元素，根据表单元素的状态来选择元素。
:checked：选择被选中的表单元素，如单选框、复选框等。:enabled：选择启用的表单元素。:disabled：选择被禁用的表单元素。:read-only：选择只读的表单元素。:read-write：选择可写的表单元素。
-
目标伪类选择器:
:target：选择当前活动的目标元素，即URL的片段标识符（#后面的部分）指向的元素。
-
否定伪类选择器:
:not(selector)：选择不符合特定选择器的元素。允许你选择不匹配该选择器的所有元素，它可以用在几乎任何选择器中，来排除某些不需要的元素。
-
示例：
/* 动态伪类选择器 */ a:hover { color: red; } /* 结构伪类选择器 */ ul li:first-child { font-weight: bold; } /* 表单伪类选择器 */ input[type="checkbox"]:checked { background-color: yellow; } /* 目标伪类选择器 */ :target { border: 2px solid blue; } /* 否定伪类选择器 */ div:not(.special) { color: gray; }
5. 伪元素选择器
- 伪元素选择器（
::开头）: 用于选择元素的某个部分或向元素添加虚拟内容，并允许为这些虚拟内容或特定部分设置样式。- 文本相关伪元素
- ::first-letter：用于选择文本块的第一个字母，并允许为其设置特殊的样式。这常用于实现首字下沉或特殊首字母效果。
- ::first-line：用于选择文本块的第一行，并允许为其设置与后续文本不同的样式。这常用于强调段落或文本块的开头部分。
- 内容生成伪元素
- ::before：在元素的内容之前插入新的内容或装饰。这通常与
content属性一起使用，以定义要插入的具体内容。 - ::after：在元素的内容之后插入新的内容或装饰。同样，这也需要
content属性来指定要插入的内容。
- ::before：在元素的内容之前插入新的内容或装饰。这通常与
- 文本相关伪元素
- 示例：
p::before { content: "注意:"; color: red; }会在每个<p>元素的内容前添加“注意:”字样，并设置其颜色为红色。p::first-line { color: blue; } p::first-letter { color: red; } p::before { content: "Before: "; color: green; } p::after { content: " After"; color: black; }
6. 其他选择器
-
通配符选择器（
*）: 选择页面上的所有元素。它在特定情况下（如重置样式）有着特殊的用途。 -
根伪类选择器（
:root）:选择文档的根元素（通常是<html>元素），并经常用于设置全局变量（CSS自定义属性）。 -
语言伪类选择器（
:lang）：用于选择具有特定语言属性的元素。它基于lang属性来选择元素，这在处理多语言网站时非常有用。
二、CSS所有选择器的具体使用示例
1. 基础选择器
-
元素选择器: 选择HTML文档中所有指定类型的元素。
p { color: red; }<p>这是一个段落。</p>这个例子会选择所有的
<p>元素，并将它们的文字颜色设置为红色。 -
类选择器: 选择具有指定类名的所有元素。
.highlight { background-color: yellow; }<p class="highlight">这是一个段落。</p>这个例子会选择所有
class="highlight"的元素，并将它们的背景颜色设置为黄色。 -
ID选择器: 选择具有指定ID的元素。（注意：每个ID在文档中应该是唯一的）
#idname { color: green; }<p id="idname">这是一个段落。</p>这个例子会选择
id="idname"的元素，并将它的文字颜色设置为绿色。
2. 组合选择器
-
后代选择器: 选择某元素后代的所有指定元素。
div p { color: blue; }<div> <p>这是一个段落。</p> </div> -
子元素选择器: 选择某元素子代的所有指定元素。
div > p { color: red; }<div> <p>这是一个段落。</p> </div> -
相邻兄弟选择器: 选择紧接在某元素后的所有指定元素。 选择紧接在另一元素后的元素，且二者有相同的父元素。
h1 + p { margin-top: 50px; }<h1>标题</h1> <p>这是一个段落。</p>这个例子会选择紧跟在
<h1>元素后的<p>元素，并设置其上外边距为50像素。 -
通用兄弟选择器: 选择某个元素之后的所有兄弟元素（共享相同的父元素），而不限于直接相邻的兄弟。
h1 ~ p { color: orange; }这个例子会选择所有在
<h1>元素之后的<p>兄弟元素，并将它们的文字颜色设置为橙色。
- 群组选择器: 允许同时选择多个选择器，并对它们应用相同的样式规则。群组选择器通过逗号
,分隔不同的选择器。
这个例子会选择将h1, h2, p { color: blue; }<h1>、<h2>和<p>元素的文字颜色都设置为蓝色。
3. 属性选择器
-
等于属性选择器: 选择具有指定属性值的元素
a[target="_blank"] { color: red; }<a href="https://www.example.com" target="_blank">链接</a> -
包含属性选择器: 选择属性值包含指定子串的元素。选择某个元素内部的后代元素（包括子元素、孙子元素等）。
div p { color: green; }这个例子会选择所有
<div>元素内部的<p>元素，并将它们的文字颜色设置为绿色。 -
起始属性选择器: 选择属性值以指定子串开头的元素
a[href^="https"] { color: black; }<a href="https://www.example.com">链接</a> -
结尾属性选择器: 选择属性值以指定子串结尾的元素
a[href$=".pdf"] { color: blue; }<a href="document.pdf">PDF文档</a> -
子串属性选择器: 选择属性值包含指定子串的元素。选择作为某元素直接子元素的所有元素。
ul > li { list-style-type: none; }这个例子会选择所有直接位于
<ul>元素下的<li>-元素，并移除它们的列表样式。
4. 伪类选择器
- 动态伪类选择器：用于选择处于特定状态的元素。
-
结构伪类选择器: 基于元素在文档树中的位置或与其他元素的关系来选择元素。选择文档树中特定结构的元素。
-
表单伪类选择器: 用于表单元素，根据表单元素的状态来选择元素。
-
目标伪类选择器: 选择当前活动的目标元素，即URL的片段标识符（#后面的部分）指向的元素。
-
否定伪类选择器: 选择不符合特定选择器的元素。允许你选择不匹配该选择器的所有元素，它可以用在几乎任何选择器中，来排除某些不需要的元素。
-
示例：
/* 动态伪类选择器 */ a:hover { color: red; } /* 结构伪类选择器 */ ul li:first-child { font-weight: bold; } /* 表单伪类选择器 */ input[type="checkbox"]:checked { background-color: yellow; } /* 目标伪类选择器 */ :target { border: 2px solid blue; } /* 否定伪类选择器 */ div:not(.special) { color: gray; }
5. 伪元素选择器
- 伪元素选择器（
::开头）: 用于选择元素的某个部分或向元素添加虚拟内容，并允许为这些虚拟内容或特定部分设置样式。p::first-line { color: blue; } p::first-letter { color: red; } p::before { content: "Before: "; color: green; } p::after { content: " After"; color: black; }<p>这是一个段落。</p>
6. 其他选择器
-
通配符选择器（*）：匹配页面上的所有元素。这种选择器在需要为页面上所有元素设置统一的样式时非常有用，特别是在重置样式或设置一些基本的样式规则时。
- 示例：
* { margin: 0; padding: 0; box-sizing: border-box; }在这个例子中，通配符选择器被用来为页面上所有元素设置
margin和padding为0，并将box-sizing属性设置为border-box，这是一种常见的样式重置方法，有助于减少浏览器之间的样式差异。 -
根伪类选择器（:root）：用于选择文档的根元素，通常是
<html>元素。它经常用于设置全局变量（CSS自定义属性），这些变量可以在整个文档中被重复使用，有助于保持样式的一致性并减少重复代码。- 示例：
:root { --primary-color: #007bff; --font-family: Arial, sans-serif; } body { color: var(--primary-color); font-family: var(--font-family); }在这个例子中，
:root选择器被用来定义两个全局变量--primary-color和--font-family。然后，在body选择器中，这些变量被用作color和font-family属性的值，从而在整个文档中统一了字体颜色和字体族。 -
语言伪类选择器（:lang）：用于选择具有特定
lang属性的元素。这个选择器在处理多语言网站时非常有用，因为它允许你根据元素的语言属性来应用不同的样式。- 示例：
<p lang="en">This is a paragraph in English.</p> <p lang="fr">Ceci est un paragraphe en français.</p>:lang(en) { font-family: Arial, sans-serif; } :lang(fr) { font-family: 'Times New Roman', serif; }在这个例子中，
:lang(en)选择器被用来选择所有lang属性为en的元素，并为它们设置Arial字体。类似地，:lang(fr)选择器被用来选择所有lang属性为fr的元素，并为它们设置’Times New Roman’字体。这样，不同语言的文本就可以使用不同的字体样式，从而提高了网站的可读性和用户体验。
总结
CSS所有选择器大致分为6种类型：
1.基础选择器
2.组合选择器
3.属性选择器
4.伪类选择器
5.伪元素选择器
6.其他选择器
PS：
参考文档：https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_selectors
MDN Web Docs（全称Mozilla Developer Network，谋智开发者网络），提供了关于Web技术、开放网络应用和Web标准的详细、权威、可靠的文档，可以深入学习Web技术以及能够驱动Web的软件，包括网络标准（例如CSS、HTML和JavaScript）和开发开放网络应用等。
扫一扫
134
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
