选择器

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

See more in CSS_Selectors

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

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-child、only-of-type

括号中的 n 可以是 2n+1、-n+5、even、odd 等

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

: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, 那么伪元素选择器的优先级究竟排在哪个位置呢? 答案后续揭晓。

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

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