前言:君子善器而器
历史前进的步伐是不会停止的,紧跟着CSS3,新的CSS4也即将问世,它正由W3C编辑团队研发中。
垂涎已久的父级选择器
$li > span {
color: red;
}
#demo > $ul > li {
color: red;
}
- 样式分别作用在li上,和ul上
matches()
.demo:matches(:hover, :focus) button {
color: red;
}
- 当 demo 的状态为 hover 或 focus 时,改变其子元素 button的颜色
ID匹配
<ul>
<li class='test' data-id='demo'>a</li>
</ul>
<div>
<p id='demo'></p>
</div>
<style>
.test:hover/data-id/p
</style>
- 当test元素处于hover状态下,匹配id等于test属性data-id的值的p元素
local-link(n)
<a href="www.zero.com">0</a>
<a href="www.zero.com/a">1</a>
<a href="www.zero.com/a/b">2</a>
<style>
a:local-link(0) {
color:blue;
}
a:local-link(1) {
color:grey;
}
a:local-link(2) {
color:orange;
}
</style>
- 分别匹配 0, 1, 2
:default
- 选取默认伪元素
:required、:optional
- 匹配表单中必选和可选项
:read-write、:read-only
- 匹配可读可写伪类
····(未完)