前几天在用 bootstrap 4 的时候发现了 :root 这个陌生的 css 伪类，到 mdn 上一查发现了很多之前没见过的，还有 css 中竟然可以定义变量了，还有不少伪元素，其中有一些修改表单默认控件样式的，所以决定一起看一下，记一下。

css 伪类

  • :active: 匹配被用户激活的元素。常用于 a, button 元素
  • :any: mdn 文档 可以让您快速构建类似的选择器集合，通过建立包含所有包含项的组来匹配。
  • :any-link: 代表一个有链接锚点的元素，而不管它是否被访问过，也就是说，它会匹配每一个有 href 属性的 <a>、<area> 或 <link> 元素。因此，它会匹配到所有的 :link 或 :visited。
  • :checked: 表示任何处于选中状态的radio(<input type=”radio”>), checkbox (<input type=”checkbox”>) 或(“select”) 元素中的option HTML元素(“option”)) 。
  • :default: 表示一组相关元素中的默认表单元素。
  • :defined: 匹配定义的元素。
  • :dir(): 匹配包含定义文本方向的元素。可选值为 ltr(从左到右), rtl(从右到左)。例如：<div dir=”ltr”>test2</div>
  • :disabled: 匹配禁用元素。
  • :empty: 匹配任何没有子元素的元素。子元素可以是元素节点或者文本。
  • :enabled: 匹配没有被禁用的元素。
  • :first: 匹配第一个页面。与 @page 配合使用。
  • :first-child: 匹配一组元素中第一个元素节点。
  • :first-of-type: 匹配一组相邻元素中第一个所选类型元素。
  • :fullscreen: 匹配进入全屏的元素。
  • :focus: 匹配获得焦点的元素。
  • :focus-within: 匹配或得焦点或者其内部子元素或得焦点的元素。
  • :hover: 匹配鼠标移上的元素。
  • :indeterminate: 匹配任何状态为 indeterminate 的表单元素。
  • :in-range: 匹配当前的 value 没有超过可选范围的表单元素。
  • :invalid: 匹配任何 form 或 input 中内容不合法的元素。
  • :lang(): 匹配包含语言设置的元素。<div lang=”en”></div>
  • :last-child: 匹配一组元素中最后一个所选元素。
  • :last-of-type: 匹配一组相邻元素中最后一个该类型的元素。
  • :left: 和 @page 配合，匹配所有按 left-hand 输出的页面。
  • :link: 匹配包含 href 属性的并且没有被 visited 的元素。
  • :not(): 匹配一系列不在选取范围的元素。
  • :nth-child(n): 匹配第 n 个元素。
  • :nth-last-child(): 从末尾开始匹配。
  • :nth-last-of-type(): 从末尾按类型匹配。
  • :nth-of-type(n): 按类型位置进行匹配。
  • :only-child: 匹配没有兄弟元素的元素。
  • :only-of-type: 匹配没有兄弟元素的符合类型的元素。
  • :optional: 匹配没有设置 required 的表单元素。
  • :out-of-range: 与 in-range 相反，匹配 value 超出范围的元素。
  • :placeholder-shown: 匹配当前展示出 placeholder 文本的表单。
  • :read-only: 匹配只读的表单元素。 <input type=”text” value=”This is a read-only field.” readonly>
  • :read-write: 匹配可以读写的元素。包括 contenteditable 为 true 的元素。
  • :required: 匹配设置了 required 的表单元素。
  • :right: 与 @page 配合，匹配所有按 right-hand 输出的页面。
  • :root: 匹配文档的根元素，即 html。
  • :socpe:
  • :target:
  • :valid: 匹配表单 value 合法的元素。
  • :visited: 匹配点击过的 a 元素。

css 伪元素

mdn

  • ::moz-progress-bar: 进度条 progress 样式控制
  • ::moz-range-progress: input type range 的滑过进度样式
  • ::moz-range-thumb: input type range 的滑块样式
  • ::moz-range-track: input type range 的背景条样式
  • ::ms-browse: input type file 的 button 的样式
  • ::ms-check: radio, checkbox 的选框样式
  • ::ms-clear: IE input text 框自带 x(清除) 样式
  • ::ms-expand: IE select option 的样式
  • ::ms-fill: IE progress 的样式
  • ::ms-fill-lower: IE input range 的样式
  • ::ms-fill-upper: IE input range 的样式
  • ::ms-thumb: IE input range 的样式
  • ::ms-track: IE input range 的样式
  • ::ms-reveal: IE input password 的样式
  • ::webkit-progress-bar: progress 的样式
  • ::webkit-progress-value: progress 的样式
  • ::webkit-slider-runnable-track: input range 的样式
  • ::webkit-slider-thumb: input range 的样式
  • ::after: :after
  • ::backdrop:
  • ::before: :after
  • ::cue:
  • ::first-letter: 第一个单词
  • ::first-line: 第一行文本
  • ::grammar-error: 语法错误
  • ::spelling-error: 拼写错误
  • ::placeholder: placeholder 文本样式
  • ::selection: 当文本被选中时的样式

css 变量

1
2
3
4
5
6
7
8
9

<!-- 变量申明 -->
element {
  --main-bg-color: brown;
}

<!-- 变量调用 -->
element {
  background-color: var(--main-bg-color);
}