选择器

子类选择器 (>)

  • p > span {} 意为 p 元素后面直接跟着 span 的情形样式才生效

对比: p span {} 意为 p 元素后面跟着 span 的情形

相邻选择器 (~)

  • p ~ span {} 意为与 p 元素同级别且位于 p 元素之后所有的 span 标签会生效

相邻选择器 (+)

  • p + span {} 意为与 p 元素同级别且位于 p 元素之后相邻的 span 标签会生效

踩坑: 注意与 .a .b {} 的区别

伪类选择器和伪元素选择器

  • 伪类选择器: :link:visited:hover:active(前面 4 个可以记忆成 LoVe-HA)、:nth-child
  • 伪元素选择器: ::before::after

p:first-child {} 含义: 某元素的第一个子元素为 p 情形时的样式。

注意: 不是 p 的第一个子元素。

结构性伪类选择器: :not():empty:first-child:last-child:nth-child(n):nth-last-child(n)

  • :first-of-type:nth-of-type(n):last-of-type:nth-last-of-type(n)only-childonly-of-type

括号中的 n 可以是 2n+1-n+5evenodd

此外还有一些特殊的伪类选择器

  • :enabled:disabled
  • :checked(选择框加点变化示例)、::selection(改变用鼠标选择网页文本的样式)
  • :read-only(与 html 中 readonly='readonly' 配合使用)、:read-write(与 :read-only 选择器相反, 主要用来指定当元素处于非只读状态时的样式。)

选择器优先级排序

Id 选择器 > 类选择器 | 属性选择器 > 元素 > 通配选择器

伪类选择器的优先级是否是最低的呢?

在 input 的 style 设置 font-size: 30px, ::placeholder { font-size: 12px }, 最终的 font-size 是多少呢?

当前的事实是 12px, 那么伪元素选择器的优先级究竟排在哪个位置呢? 答案后续揭晓。

JavaScript 与伪元素选择器进行通信

可以使用 css 方法 attr() 获取节点上 data-xx 的属性信息。比如:

.demo::after {
content: attr(data-msg);
...
}