css4——下一个脚步

前言：君子善器而器

历史前进的步伐是不会停止的，紧跟着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

• 匹配可读可写伪类

····（未完）