QuickTV仓库

伪类

CSS 伪类速查表

伪类名称中文名称说明是否支持
:focus获取焦点元素获得焦点时触发（如输入框）✅
:first-child第一个子元素父元素下的第一个子元素✅
:last-child最后一个子元素父元素下的最后一个子元素✅
:nth-child(n)第 n 个子元素匹配父元素下第 n 个子元素✅
:empty空元素没有子元素（不含文本/空格）的元素✅
:not(selector)非某类选择器匹配不符合选择器的元素✅
:hover悬停状态鼠标悬停在元素上时触发❌
:active激活状态元素被激活（如按钮点击中）时触发❌
:visited已访问链接表示用户访问过的链接❌
:link未访问链接表示尚未访问的链接❌
:checked选中状态复选框或单选框被选中时❌
:disabled禁用状态表示元素被禁用❌
:enabled启用状态表示元素处于启用状态❌
:nth-last-child(n)倒数第 n 个子元素匹配父元素下倒数第 n 个子元素❌
:first-of-type类型中第一个同类型元素中的第一个❌
:last-of-type类型中最后一个同类型元素中的最后一个❌
:nth-of-type(n)类型中第 n 个同类型元素中的第 n 个❌
:root根元素HTML 文档中的 <html> 元素❌
:targetURL 目标元素当前 URL 哈希值匹配的元素（如锚点跳转）❌
:required必填字段表单中设置了 required 属性的字段❌
:optional非必填字段表单中未设置 required 的字段❌
:valid有效字段表单字段通过验证❌
:invalid无效字段表单字段未通过验证❌
:in-range范围内字段输入值在设定范围内❌
:out-of-range范围外字段输入值超出设定范围❌
:read-only只读元素表示不可编辑的输入元素❌
:read-write可读写元素表示可编辑的输入元素❌
:is()多选择器匹配接受多个选择器，匹配任一即可（CSS4 新增）❌
:where()不影响权重匹配类似 :is()，但不增加 specificity❌
:has()父级选择器选择包含某些子元素的父元素（CSS4 特性）❌

二、伪类指令v-pseudo

v-pseudo是元素标签上用来控制是否启用对应的伪类的指令。

1、自定义伪类指令test

v-pseudo:test="value"


<div
  v-pseudo:test='value'
  class='div-v-pseudo-css'
  :focusable='true'
  :enableFocusBorder='true'
  :focusScale='1'
  @focus='onFocus'
/>

2、编写伪类test 

.div-v-pseudo-css:test {
  width: 384px;
  height: 216px;
  margin: 20px;
  background: palevioletred;
}