CSS选择器详解

最新推荐文章于 2026-01-05 11:04:12 发布

原创最新推荐文章于 2026-01-05 11:04:12 发布 · 407 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#css

CSS 专栏收录该内容

7 篇文章

订阅专栏

CSS选择器详解

CSS选择器是用于选择HTML元素并应用样式规则的模式。了解各种选择器及其用法是掌握CSS的关键。以下是CSS选择器的全面详解：

一、基本选择器

1. 元素选择器（标签选择器）

选择所有指定HTML元素

p {
  color: blue;
}
/* 选择所有<p>元素 */

2. 类选择器（Class选择器）

选择具有指定class属性的元素

.error {
  color: red;
}
/* 选择class="error"的元素 */

3. ID选择器

选择具有指定id属性的元素

#header {
  background: #333;
}
/* 选择id="header"的元素 */

4. 通配符选择器

选择所有元素

* {
  margin: 0;
  padding: 0;
}
/* 选择页面所有元素 */

二、组合选择器

1. 后代选择器（空格）

选择指定元素内的所有后代元素

div p {
  color: green;
}
/* 选择<div>内所有的<p>元素 */

2. 子元素选择器（>）

选择指定元素的直接子元素

ul > li {
  list-style: none;
}
/* 选择<ul>的直接子元素<li> */

3. 相邻兄弟选择器（+）

选择紧接在另一元素后的元素

h1 + p {
  font-size: 1.2em;
}
/* 选择紧接在<h1>后的<p> */

4. 通用兄弟选择器（~）

选择指定元素后的所有同级元素

h2 ~ p {
  color: purple;
}
/* 选择<h2>之后的所有同级<p> */

三、属性选择器

1. 基本属性选择器

[title] {
  color: blue;
}
/* 选择带有title属性的元素 */

2. 精确匹配属性值

[type="text"] {
  background: #eee;
}
/* 选择type="text"的元素 */

3. 包含指定值的属性

[class~="error"] {
  border: 1px solid red;
}
/* 选择class包含"error"的元素 */

4. 属性值开头匹配

[href^="https"] {
  color: green;
}
/* 选择href以"https"开头的元素 */

5. 属性值结尾匹配

[src$=".jpg"] {
  border: 2px solid #ddd;
}
/* 选择src以".jpg"结尾的元素 */

6. 属性值包含子串

[alt*="logo"] {
  width: 100px;
}
/* 选择alt属性包含"logo"的元素 */

四、伪类选择器

1. 链接相关

a:link { color: blue; }    /* 未访问链接 */
a:visited { color: purple; } /* 已访问链接 */
a:hover { color: red; }    /* 鼠标悬停 */
a:active { color: green; } /* 激活链接 */

2. 表单相关

input:focus { background: #ffe; }
input:disabled { opacity: 0.5; }
input:checked + label { font-weight: bold; }

3. 结构伪类

li:first-child { font-weight: bold; }
li:last-child { border-bottom: none; }
tr:nth-child(odd) { background: #f5f5f5; }
p:nth-of-type(2) { color: red; }
:not(p) { margin-left: 10px; }

4. 其他伪类

:target { background: #ffa; } /* URL片段标识的目标元素 */
:empty { display: none; }    /* 没有子元素的元素 */
:root { --main-color: #06c; } /* 文档根元素 */

五、伪元素选择器

1. ::before 和 ::after

p::before {
  content: "→ ";
  color: green;
}
p::after {
  content: " ←";
  color: red;
}

2. 文本选择相关

::selection {
  background: yellow;
  color: black;
}
p::first-letter { font-size: 2em; }
p::first-line { font-weight: bold; }

六、选择器优先级

1. 特异性计算规则

内联样式：1000
ID选择器：100
类/属性/伪类选择器：10
元素/伪元素选择器：1
通配符/组合符：0

2. 优先级示例

#nav .item a:hover {}  /* 特异性：100 + 10 + 1 + 10 = 121 */
div#header ul li a {}  /* 特异性：1 + 100 + 1 + 1 + 1 = 104 */

3. !important规则

p {
  color: red !important; /* 最高优先级 */
}

七、CSS3新增选择器

1. 结构伪类增强

:nth-last-child(2) {}  /* 倒数第2个子元素 */
:nth-last-of-type(3n+1) {} 
:only-child {}         /* 唯一子元素 */
:only-of-type {}      /* 同类唯一元素 */

2. UI状态伪类

:enabled {} :disabled {} 
:read-only {} :read-write {}
:required {} :optional {}
:valid {} :invalid {}
:in-range {} :out-of-range {}

3. 其他新增

:target {}          /* URL目标元素 */
:lang(en) {}        /* 指定语言元素 */
:has(div) {}        /* 包含指定子元素的元素 */
:is(section, article) h1 {} /* 分组选择 */
:where(.class1, .class2) {} /* 零特异性分组 */