CSS选择器 - 技术栈

第5章：CSS选择器

5.1 基础选择器

5.1.1 元素选择器

css 复制代码

/* 选择所有段落 */
p {
  color: #333;
}

/* 选择所有标题 */
h1, h2, h3 {
  font-weight: bold;
}

5.1.2 类选择器

css 复制代码

/* 选择具有特定类的元素 */
.button {
  padding: 10px 20px;
  background: blue;
}

/* 多个类组合 */
.button.primary {
  background: #007bff;
}

.button.large {
  padding: 15px 30px;
}

5.1.3 ID选择器

css 复制代码

/* 选择特定ID的元素 */
#header {
  background: #f8f9fa;
}

#main-content {
  max-width: 1200px;
  margin: 0 auto;
}

5.1.4 通用选择器

css 复制代码

/* 选择所有元素 */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

5.2 属性选择器

5.2.1 基本属性选择器

css 复制代码

/* 选择具有特定属性的元素 */
[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}

/* 选择具有特定属性值的元素 */
[type="text"] {
  border: 1px solid #ccc;
}

[data-status="active"] {
  background: green;
}

5.2.2 属性值匹配

css 复制代码

/* 属性值包含特定字符串 */
[class*="btn"] {
  display: inline-block;
}

/* 属性值以特定字符串开头 */
[href^="https"] {
  color: green;
}

/* 属性值以特定字符串结尾 */
[src$=".jpg"] {
  border: 2px solid #ddd;
}

/* 属性值包含特定单词 */
[class~="important"] {
  font-weight: bold;
}

/* 属性值以特定字符串开头（单词边界） */
[class|="section"] {
  margin-bottom: 2rem;
}

5.3 伪类选择器

5.3.1 链接和用户交互

css 复制代码

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

/* 表单元素状态 */
input:focus {
  outline: 2px solid #007bff;
}

input:disabled {
  background: #f5f5f5;
}

input:checked {
  background: green;
}

input:required {
  border-color: red;
}

5.3.2 结构伪类

css 复制代码

/* 第一个和最后一个子元素 */
li:first-child {
  font-weight: bold;
}

li:last-child {
  border-bottom: none;
}

/* 第n个子元素 */
li:nth-child(odd) {
  background: #f9f9f9;
}

li:nth-child(even) {
  background: white;
}

li:nth-child(3n) {
  color: blue;
}

/* 特定位置的子元素 */
p:first-of-type {
  font-size: 1.2em;
}

p:last-of-type {
  margin-bottom: 0;
}

/* 唯一子元素 */
:only-child {
  text-align: center;
}

:only-of-type {
  border: 2px solid gold;
}

5.3.3 内容相关伪类

css 复制代码

/* 空元素 */
div:empty {
  display: none;
}

/* 包含特定内容的元素 */
p:contains("重要") {
  background: yellow;
}

/* 匹配语言 */
:lang(zh) {
  font-family: "Microsoft YaHei", sans-serif;
}

5.4 伪元素选择器

5.4.1 内容生成

css 复制代码

/* 在元素前插入内容 */
blockquote::before {
  content: """;
  font-size: 2em;
  color: #ccc;
}

/* 在元素后插入内容 */
blockquote::after {
  content: """;
  font-size: 2em;
  color: #ccc;
}

/* 首字母样式 */
p::first-letter {
  font-size: 2em;
  font-weight: bold;
  float: left;
  margin-right: 5px;
}

/* 首行样式 */
p::first-line {
  font-weight: bold;
  color: #333;
}

5.4.2 选择用户界面部分

css 复制代码

/* 选择用户选择的文本 */
::selection {
  background: yellow;
  color: black;
}

/* 选择占位符文本 */
input::placeholder {
  color: #999;
  font-style: italic;
}

/* 选择列表标记 */
li::marker {
  color: red;
  font-weight: bold;
}

5.5 组合选择器

5.5.1 后代选择器

css 复制代码

/* 选择所有后代元素 */
article p {
  line-height: 1.6;
}

/* 多层嵌套 */
nav ul li a {
  text-decoration: none;
}

5.5.2 子元素选择器

css 复制代码

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

section > h2 {
  border-bottom: 1px solid #ccc;
}

5.5.3 相邻兄弟选择器

css 复制代码

/* 选择紧接在后面的兄弟元素 */
h2 + p {
  margin-top: 0;
}

input:checked + label {
  font-weight: bold;
}

5.5.4 通用兄弟选择器

css 复制代码

/* 选择后面所有的兄弟元素 */
h2 ~ p {
  color: #666;
}

.active ~ li {
  opacity: 0.5;
}

5.6 CSS3新增选择器

5.6.1 否定伪类

css 复制代码

/* 选择不匹配条件的元素 */
input:not([type="submit"]) {
  border: 1px solid #ccc;
}

li:not(.special) {
  color: #999;
}

/* 多重否定 */
div:not(.hidden):not(.disabled) {
  display: block;
}

5.6.2 目标伪类

css 复制代码

/* 选择当前活动的锚点目标 */
:target {
  background: yellow;
}

/* 特定ID的目标 */
#section1:target {
  border-left: 5px solid blue;
}

5.6.3 启用和禁用状态

css 复制代码

/* 启用状态的元素 */
input:enabled {
  border-color: green;
}

/* 禁用状态的元素 */
input:disabled {
  background: #f5f5f5;
  cursor: not-allowed;
}

5.6.4 范围伪类

css 复制代码

/* 在指定范围内的输入 */
input:in-range {
  border-color: green;
}

input:out-of-range {
  border-color: red;
}

5.6.5 有效性伪类

css 复制代码

/* 有效输入 */
input:valid {
  border-color: green;
}

/* 无效输入 */
input:invalid {
  border-color: red;
}

5.7 选择器优先级

5.7.1 优先级计算

优先级由四个部分组成：

内联样式：1000
ID选择器：100
类/属性/伪类：10
元素/伪元素：1

css 复制代码

/* 优先级：1 */
p { color: black; }

/* 优先级：10 */
.text { color: blue; }

/* 优先级：100 */
#header { color: red; }

/* 优先级：10 + 1 = 11 */
p.text { color: green; }

/* 优先级：100 + 10 + 1 = 111 */
#header p.text { color: purple; }

5.7.2 !important 规则

css 复制代码

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

/* 谨慎使用 */
.warning {
  background: yellow !important;
}

5.7.3 特异性策略

css 复制代码

/* 保持低特异性 */
.component .title {
  font-size: 1.2em;
}

/* 避免过度特异性 */
#main .content .article .title {
  /* 过于具体，难以覆盖 */
}

/* 使用BEM方法论 */
.block__element--modifier {
  /* 可预测的特异性 */
}

5.8 高级选择器技巧

5.8.1 属性选择器组合

css 复制代码

/* 组合多个属性条件 */
input[type="text"][required] {
  border-color: red;
}

a[href^="https"][target="_blank"]::after {
  content: " ↗";
}

5.8.2 伪类链式使用

css 复制代码

/* 多个伪类组合 */
button:hover:active {
  transform: translateY(1px);
}

input:focus:valid {
  border-color: green;
  box-shadow: 0 0 5px green;
}

5.8.3 复杂结构选择

css 复制代码

/* 选择表格的奇偶行 */
tbody tr:nth-child(odd) {
  background: #f9f9f9;
}

/* 选择除了第一个和最后一个以外的所有子元素 */
li:not(:first-child):not(:last-child) {
  border-left: 1px solid #ccc;
  border-right: 1px solid #ccc;
}

5.8.4 动态内容选择

css 复制代码

/* 选择有特定数据属性的元素 */
[data-tooltip]:hover::after {
  content: attr(data-tooltip);
  position: absolute;
  background: black;
  color: white;
  padding: 5px;
  border-radius: 3px;
}

/* 选择包含特定文本的元素 */
div:has(> p:contains("警告")) {
  border: 2px solid red;
}

5.9 性能优化

5.9.1 选择器性能

css 复制代码

/* 高效选择器 */
.button { /* 类选择器，高效 */ }

/* 低效选择器 */
div ul li a { /* 过于具体，性能较差 */ }

/* 优化后的选择器 */
.nav-link { /* 直接类选择器，高效 */ }

5.9.2 最佳实践

css 复制代码

/* 使用类选择器代替标签选择器 */
/* 不推荐 */
div.content { }

/* 推荐 */
.content { }

/* 避免通用选择器过度使用 */
/* 不推荐 */
* { margin: 0; padding: 0; }

/* 推荐 */
body, h1, h2, h3, p { margin: 0; padding: 0; }

5.10 现代CSS选择器

5.10.1 :is() 和 :where()

css 复制代码

/* :is() - 计算特异性 */
:is(header, footer, section) h1 {
  color: blue;
}

/* :where() - 零特异性 */
:where(header, footer, section) h1 {
  color: blue;
}

/* 组合使用 */
article :is(h1, h2, h3) {
  margin-top: 2rem;
}

nav :where(a, button) {
  text-decoration: none;
}

5.10.2 :has() 父选择器

css 复制代码

/* 选择包含特定子元素的父元素 */
div:has(> img) {
  border: 1px solid #ccc;
}

/* 选择包含特定相邻元素的元素 */
section:has(+ section) {
  margin-bottom: 3rem;
}

/* 复杂条件 */
.card:has(.title:contains("重要")) {
  background: #fff3cd;
}

5.11 总结

CSS选择器是样式应用的基础，掌握各种选择器类型和组合方式对于编写高效、可维护的CSS至关重要。现代CSS3选择器提供了更强大和灵活的选择能力，同时需要注意选择器的性能和特异性管理。