CSS选择器是用来选择和应用样式到HTML元素上的工具。以下是所有主要的CSS选择器的详细分类和描述:
1. 基本选择器
- 通配符选择器 (
*
):选择所有元素。例如,* { color: red; }
会将所有元素的文字颜色设置为红色。 - 元素选择器:选择指定类型的元素。例如,
p { margin: 0; }
会将所有<p>
元素的外边距设置为0。 - 类选择器 (
.
):选择所有具有指定类的元素。例如,.class-name { color: blue; }
会将所有具有class-name
类的元素的文字颜色设置为蓝色。 - ID选择器 (
#
):选择具有指定ID的单个元素。例如,#element-id { font-size: 16px; }
会将ID为element-id
的元素的字体大小设置为16px。 - 属性选择器 (
[attr]
):选择具有指定属性的元素。例如,[type="text"] { border: 1px solid black; }
会将所有type
属性值为text
的元素边框设置为黑色实线。
2. 组合选择器
- 后代选择器 (
div p { color: green; }
会将所有在<div>
内部的<p>
元素文字颜色设置为绿色。 - 子选择器 (
>
):选择某元素的直接子元素。例如,ul > li { list-style-type: none; }
会将所有<ul>
的直接子<li>
元素的列表样式设置为无。 - 相邻兄弟选择器 (
+
):选择某元素后紧跟的相邻兄弟元素。例如,h1 + p { margin-top: 0; }
会将紧跟在<h1>
后面的<p>
元素的上外边距设置为0。 - 通用兄弟选择器 (
~
):选择某元素后面所有的兄弟元素。例如,h1 ~ p { color: purple; }
会将所有<h1>
后面的<p>
元素的文字颜色设置为紫色。
3. 伪类选择器
-
结构性伪类:
:first-child
:选择作为其父元素的第一个子元素的元素。例如,p:first-child { font-weight: bold; }
会将父元素的第一个<p>
子元素的文字加粗。:last-child
:选择作为其父元素的最后一个子元素的元素。:nth-child(n)
:选择作为其父元素的第n个子元素的元素。例如,li:nth-child(2) { color: red; }
会将第二个<li>
元素的文字颜色设置为红色。:nth-of-type(n)
:选择父元素中第n个指定类型的元素。:not(selector)
:选择不匹配指定选择器的元素。例如,:not(.special) { color: gray; }
会将所有没有special
类的元素文字颜色设置为灰色。
-
伪元素:
::before
:在指定元素的内容之前插入内容。例如,p::before { content: "Note: "; color: blue; }
会在每个<p>
元素的内容前插入“Note: ”。::after
:在指定元素的内容之后插入内容。例如,p::after { content: "."; }
会在每个<p>
元素的内容后插入一个句号。::first-line
:选择元素的第一行文本。::first-letter
:选择元素的第一字母。
4. 属性选择器的变体
[attr=value]
:选择具有指定属性值的元素。例如,input[type="text"]
选择type
属性值为text
的<input>
元素。[attr^="value"]
:选择属性值以指定值开头的元素。例如,a[href^="https"]
选择所有href
属性以https
开头的<a>
元素。[attr$="value"]
:选择属性值以指定值结尾的元素。例如,img[src$=".jpg"]
选择所有src
属性以.jpg
结尾的<img>
元素。[attr*="value"]
:选择属性值包含指定值的元素。例如,a[href*="example"]
选择所有href
属性中包含example
的<a>
元素。
5. 组合选择器
- 相邻兄弟选择器 (
+
):选择紧接在指定元素之后的元素。例如,h2 + p { margin-top: 0; }
会将紧跟在<h2>
后面的<p>
元素的上外边距设置为0。 - 一般兄弟选择器 (
~
):选择指定元素之后的所有兄弟元素。例如,h2 ~ p { color: gray; }
会将所有在<h2>
之后的<p>
元素的文字颜色设置为灰色。