CSS Guidebook

CSS 完全知识体系

选择符

选择符分为五类：

  • 元素选择符 Element Selectors
  • 关系选择符 Relationship Selectors
  • 属性选择符 Attribute Selectors
  • 伪类选择符 Pseudo-Classes Selectors
  • 伪元素选择符 Pseudo-Element Selectors

元素选择符

选择符选择符名称描述
*通配选择符所有元素对象
E类型选择符以文档语言对象类型作为选择符
E#idID 选择符以唯一标识符 ID 属性的 E 元素作为选择符
E.class类选择符以 class 属性的 E 元素作为选择符

关系选择符

选择符选择符名称描述CSS3
E F包含选择符选择所有被 E 元素包含的 F 元素（能命中所有后代元素）
E>F子选择符选择所有作为 E 元素的子元素 F（只能命中子元素）
E+F相邻选择符选择紧贴在 E 元素之后 F 元素
E~F兄弟选择符选择 E 元素所有兄弟元素 F✅

属性选择符

选择符描述CSS3
E[att]选择具有 att 属性的 E 元素。
E[att='val']选择具有 att 属性且属性值等于 val 的 E 元素。
E[att~='val']选择具有 att 属性且属性值为一用空格分隔的字词列表，其中一个等于 val 的 E 元素。
E[att^='val']选择具有 att 属性且属性值为以 val 开头的字符串的 E 元素。✅
E[att$='val']选择具有 att 属性且属性值为以 val 结尾的字符串的 E 元素。✅
E[att*='val']选择具有 att 属性且属性值为包含 val 的字符串的 E 元素。✅
E[att|='val']选择具有 att 属性且属性值为以 val 开头并用连接符 - 分隔的字符串的 E 元素，如果属性值仅为 val，也将被选择。

.div {
  /* 表示存在 class 属性并且以 title 开头的元素 */
  [class^='title'] {
    margin-bottom: 8px;
  }
}

伪类选择符

伪类就是一个选择处于特定状态的元素的选择器，比如某个 className 的第一个元素，某个被 hover 的元素等等。我们可以理解成一个特定的 CSS 类，但与普通的类不一样，它只有处于 DOM 树无法描述的状态下才能为元素添加样式，所以将其称为 伪类。

选择符描述CSS3
E:link设置超链接 <a> 在未被访问前的样式。
E:visited设置超链接 <a> 在其链接地址已被访问过时的样式。
E:hover设置元素在其鼠标悬停时的样式。
E:active设置元素在被用户激活（在鼠标点击与释放之间发生的事件）时的样式。
E:focus设置元素在成为输入焦点（该元素的 onfocus 事件发生）时的样式。
E:lang(fr)匹配使用特殊语言的 E 元素。
E:not(s)匹配不含有 s 选择符的元素 E。✅
E:root匹配 E 元素在文档的根元素。✅
E:first-child匹配父元素的第一个子元素 E。
E:last-child匹配父元素的最后一个子元素 E。✅
E:only-child匹配父元素仅有的一个子元素 E。✅
E:nth-child(n)匹配父元素的第 n 个子元素 E。✅
E:nth-last-child(n)匹配父元素的倒数第 n 个子元素 E。✅
E:first-of-type匹配父元素下第一个类型为 E 的子元素。✅
E:last-of-type匹配父元素下的所有 E 子元素中的倒数第一个。✅
E:only-of-type匹配父元素的所有子元素中唯一的那个子元素 E。✅
E:nth-of-type(n)匹配父元素的第 n 个子元素 E。✅
E:nth-last-of-type(n)匹配父元素的倒数第 n 个子元素 E。✅
E:empty匹配没有任何子元素（包括 Text 节点）的元素 E。✅
E:checked匹配用户界面上处于选中状态的元素 E。✅
E:enabled匹配用户界面上处于可用状态的元素 E。✅
E:disabled匹配用户界面上处于禁用状态的元素 E。✅
E:target匹配相关 URL 指向的 E 元素。✅

/* li 最后一个元素不添加边框 */
li:not(:last-child) {
  border-bottom: 1px solid black;
}


/* 与第一个 li 相连兄弟 */
li:first-child ~ li {
  border-left: 1px solid #666;
}

伪元素选择符

伪元素和伪类很像，但是伪元素类似于增添一个新的 DOM 节点到 DOM 树中，而不是改变元素的状态。注意了，这里是类似，而不是真的增加一个节点，这也是其被称为伪元素的原因（实质上，元素被创建在文档流外）。

选择符描述
E:first-letter / E::first-letter设置元素内的第一个字符的样式。
E:first-first-line / E::first-line设置元素内的第一行的样式。
E:before / E::before设置在元素前（依据对象树的逻辑结构）发生的内容。用来和 content属性一起使用。
E:after / E::after设置在元素后（依据对象树的逻辑结构）发生的内容。用来和 content属性一起使用。
E::placeholder设置元素文字占位符的样式。
E::selection设置元素被选择时的颜色。

注意：CSS3 将伪元素选择符（Pseudo-Element Selectors）前面的单个冒号（:）修改为双冒号（::）用以区别伪类选择符（Pseudo-Classes Selectors），但以前的写法仍然有效。

参考资料

Edit this doc on GitHub2/21/2022 13:21:47