CSS选择器

2022-04-27

3分钟阅读时长

选择器的类型

选择器	示例	语法
类型选择器	`h1 { }`	元素 {样式声明 }
通配选择器	`* { }`	/
类选择器	`.box { }`	.类名 {样式声明 }
ID选择器	`#unique { }`	#id属性值 {样式声明 }
标签属性选择器	`a[title] { }`
伪类选择器	`p:first-child { }`
伪元素选择器	`p::first-line { }`
后代选择器	`article p`
子代选择器	`article > p`
相邻兄弟选择器	`h1 + p`
通用兄弟选择器	`h1 ~ p`

属性选择器

CSS 属性选择器通过已经存在的属性名或属性值匹配元素。

/* 存在title属性的<a> 元素 */
a[title] {
  color: purple;
}

/* 存在href属性并且属性值匹配"https://example.org"的<a> 元素 */
a[href="https://example.org"] {
  color: green;
}

/* 存在href属性并且属性值包含"example"的<a> 元素 */
a[href*="example"] {
  font-size: 2em;
}

/* 存在href属性并且属性值结尾是".org"的<a> 元素 */
a[href$=".org"] {
  font-style: italic;
}

/* 存在class属性并且属性值包含以空格分隔的"logo"的<a>元素 */
a[class~="logo"] {
  padding: 2px;
}

语法

[attr]
表示带有以 attr 命名的属性的元素。
[attr=value]
表示带有以 attr 命名的属性，且属性值为 value 的元素。
[attr~=value]
表示带有以 attr 命名的属性的元素，并且该属性是一个以空格作为分隔的值列表，其中至少有一个值为 value。
[attr|=value]
表示带有以 attr 命名的属性的元素，属性值为“value”或是以“value-”为前缀（"-“为连字符，Unicode 编码为 U+002D）开头。典型的应用场景是用来匹配语言简写代码（如 zh-CN，zh-TW 可以用 zh 作为 value）。
[attr^=value]
表示带有以 attr 命名的属性，且属性值是以 value 开头的元素。
[attr$=value]
表示带有以 attr 命名的属性，且属性值是以 value 结尾的元素。
[attr*=value]
表示带有以 attr 命名的属性，且属性值至少包含一个 value 值的元素。
[attr operator value i]
在属性选择器的右方括号前添加一个用空格隔开的字母 i（或 I），可以在匹配属性值时忽略大小写（支持 ASCII 字符范围之内的字母）。
[attr operator value s] Experimental
在属性选择器的右方括号前添加一个用空格隔开的字母 s（或 S），可以在匹配属性值时区分大小写（支持 ASCII 字符范围之内的字母）

伪类选择器

CSS 伪类是添加到选择器的关键字，指定要选择的元素的特殊状态。例如，:hover 可被用于在用户将鼠标悬停在按钮上时改变按钮的颜色。

/* 所有用户指针悬停的按钮 */
button:hover {
  color: blue;
}

伪类连同伪元素一起,不仅是根据文档 DOM 树中的内容对元素应用样式，而且还允许根据诸如像导航历史这样的外部因素来应用样式（例如 :visited），同样的，可以根据内容的状态（例如在一些表单元素上的 :checked），或者鼠标的位置（例如 :hover 让你知道是否鼠标在一个元素上悬浮）来应用样式。

语法

selector:pseudo-class {
  property: value;
}

标准伪类类型

伪元素选择器

伪元素是一个附加至选择器末的关键词，允许对被选择元素的特定部分修改样式。

语法

selector::pseudo-element {
  property: value;
}