CSS4(现在改用各个模块的 level 来标示)


:focus-visible 只是需要显示特定外观到 foucs 行为,如 tab 索引而非点击

a:has(> img) 表示a中有 img 子元素,由于 css 性能问题只能用于 document.querySelector()

目标选择 $

针对父元素!:
ul! li:hover {}

除了 content 其它属性也可以使用 attr() // 现在用 style 属性;使用起来跟自定义元素相似了

网格结构选择器 ||:允许选择具有指定的特征集合中的列:
col.selected || td {}
td:nth-col(1 of selector) {}
// 是否再加个行选择器以适应 grid 更好?

组合(现在有any):
:matches(div, p, nav)
重命名为 :is() // :where() Like :is(), but with 0 specificity.

p:not(.active, .visible) {} //以及复杂语法

New in this level are the revert(层叠级联回滚) keyword and for the @import rule.

区分大小写i:
[frame=hsides i] { border-style: solid none; }

语言伪类:
:lang(fr-be)
方向:
:dir()
位置伪类:
a:local-link(1)

拖动和拖放伪类:
:active-drop-target { outline: solid red; }

时间维伪类?:
:current(p, li, dt, dd) {}

变量 var
输入伪类
启用和禁用伪类
可变性伪类:只读和读写
占位符示出的伪类:占位符图示 // :placeholder-shown
默认选项伪类:默认
所选的选项伪类:检查
不定值伪类:不确定
有效期伪类:有效和无效 //:in...
范围伪类:在范围和外的范围
可选性伪类:需要和可选
用户交互伪类:用户错误
树形结构伪类

  • hyphenate-limit-lines
  • hyphenate-limit-chars
  • hyphenate-limit-zone
  • hyphenate-limit-last
  • hyphenate-character