CSS 选择器

[mbaxszy7]

CSS 选择器整理

基础选择器

1. 标签选择器
2. 类选择器
3. ID 选择器
4. 通用选择器

组合器

1. 子组合器（>）——匹配的目标元素是其他元素的直接后代。例如：.parent > .child。
2. 相邻兄弟组合器（+）——匹配的目标元素紧跟在其他元素后面。例如：p + h2。
3. 通用兄弟组合器（~）——匹配所有跟随在指定元素之后的兄弟元素。注意，它不会选中目标元素之前的兄弟元素。例如：li.active ~ li。

复合选择器

多个基础选择器可以连起来（不使用空格或者其他组合器）组成一个复合（compound）选择器（例如：h1.page-header）。 复合选择器选中的元素将匹配其全部基础选择器。 例如，.dropdown.is-active 能够选中<div class="dropdown is-active">，但是无法选中<div class="dropdown">

伪类选择器

比如：

:first-child
:last-child
:disabled——匹配已禁用的元素，包括 input、select 以及 button 元素

伪元素选择器

比如：

::first-line
::first-letter
::before
::after

属性选择器

1. [attr]—— 匹 配 的 元 素 拥 有 指 定 属 性 attr ，无论属性值是 什 么 ， 例 如 input[disabled]。
2. [attr="value"]——匹配的元素拥有指定属性 attr，且属性值等于指定的字符串值。例如：input[type="radio"]
3. [attr^="value"]——“开头”属性选择器。该选择器匹配的元素拥有指定属性 attr，且属性值的开头是指定的字符串值，例如：a[href^="https"]。
4. [attr$="value"]——“结尾”属性选择器。该选择器匹配的元素拥有指定属性 attr，且属性值的结尾是指定的字符串值，例如：a[href$= ".pdf"]。
5. [attr*="value"]——“包含”属性选择器。该选择器匹配的元素拥有指定属性 attr，且属性值包含指定的字符串值，例如：[class*="sprite-"]。
6. [attr~="value"]——“空格分隔的列表”属性选择器。该选择器匹配的元素拥有指定属性 attr，且属性值是一个空格分隔的值列表，列表中的某个值等于指定的字符串值， 例如：a[rel="author"]。
7. [attr|="value"]——匹配的元素拥有指定属性 attr，且属性值要么等于指定的字符 串值，要么以该字符串开头且紧跟着一个连字符（-）。

CSS in Depth