CSS4草案有段时间了,闲来无事找了下相关资料,发现了篇挺详细的文章http://www.sitepoint.com/future-generation-css-selectors-level-4/ 就拿来译制一下,其中有些地方更换了自己的列子。

:read-only and :read-write
:read-only用来指定当元素处于只读状态时的样式。
:read-write用来指定当元素处于读写状态时的样式。
任何可被用户编辑的元素都是在”读写“状态,否则该元素是“只读”状态。
在firefox中需要写成”-moz-read-only”或”-moz-read-write”
游览器支持:Chrome/Opera/Firefox/Safari
代码:

<style>
:read-only {outline: solid 1px blue;}
:read-write {outline: solid 1px red;}
</style>
<input type=”text” readonly>
<input type=”text” disabled>
<input type=”text”>
<div contenteditable></div>
最后一个div会有一个红色的轮廓,因为contenteditable属性。

 

默认选项伪类 :default
用来制定当页面打开时默认处于选取状态的样式。需要注意的是,即使用户将该单选框或复选框控件的选取状态设定为非选取状态,:default选择器中指定的样式仍然有效。
游览器支持:Chrome/Opera/Firefox/Safari
<style>
input:default { outline: solid 1px blue;}
</style>
<form onsubmit=”return false;”>
<input type=”submit”>
<input type=”submit”>
</form>

 

有效性伪类 :valid and :invalid
:invalid伪类选择器用来指定,当元素内容不能通过HTML 5通过使用元素的诸如required、pattern等属性所指定的检查或元素内容不符合元素的规定格式(例如通过使用type属性值为Email的input元素来限定元素内容必须为有效的Email格式)时的样式。

:valid伪类选择器用来指定,当元素内容通过HTML 5通过使用元素的诸如required、pattern等属性所指定的检查或元素内容符合元素的规定格式(例如通过使用type属性值为Email的input元素来限定元素内容必须为有效的Email格式)时的样式。
游览器支持:所有浏览器包括IE10+
<style>
input[type=email]:invalid{outline: red solid 2px;}
</style>
Email: <input type=”email” required>

 

范围伪类 :in-range and :out-of-range
:in-range伪类选择器用来指定当元素的有效值被限定在一段范围之内(通常通过min属性值与max属性值来限定),且实际输入值在该范围内时使用的样式。

:out-of-range伪类选择器用来指定当元素的有效值被限定在一段范围之内(通常通过min属性值与max属性值来限定),但实际输入值在该范围之外时使用的样式。
游览器支持:Chrome/Opera/Firefox/Safari

<style>
input[type=number]:in-range{outline: blue solid 1px;}
input[type=number]:out-of-range{outline: red solid 1px;}
</style>
<input type=”number” min=”1″ max=”20″ value=”0″>

 

:required and :optional
:required伪类选择器用来指定允许使用required属性,且已经指定了required属性的input元素、select元素以及textarea元素的样式。

:optional伪类选择器用来指定允许使用required属性,且未指定required属性的input元素、select元素以及textarea元素的样式。

游览器支持:ALL
<style>
input:required ~ .msg:after { content: ‘*’; color: red;}
input:optional ~ .msg:after { content: ‘(optional)’;}
</style>
<div>
<label for=”name”>Name:</label>
<input type=”text” id=”name” required>
<span class=”msg”></span>
</div>
<div>
<label for=”email”>Email:</label>
<input type=”email” id=”email” required>
<span class=”msg”></span>
</div>
<div>
<label for=”address”>Address:</label>
<input type=”text” id=”address”>
<span class=”msg”></span>
</div>

 

:i
默认的CSS属性选择器是大小写敏感。如果你选择的所有元素href值为“pdf”的,则不会选择元素href值为”PDF“的。
游览器支持:Opera
<style>
a[href$=”pdf”] { color: red;}
a[href$=”pdf” i] { color: red;}
</style>
<ul>
<li><a href=”example.pdf” onclick=”return false;”>example.pdf</a></li>
<li><a href=”example.PDF” onclick=”return false;”>example.PDF</a></li>
<li><a href=”example.Pdf” onclick=”return false;”>example.Pdf</a></li>
</ul>

 

:blank
这个选择器类似于:empty的兄弟选择器,:empty是匹配没有任何子元素(包括text节点)。而:blank的区别在于他可以包含空格,换行符,等。
游览器支持:无
<style>
p:blank { outline: solid 1px red;}
p:empty { border: solid 1px green;}
</style>
<p></p>
<p> </p>

 

Matches-any伪类 :matches()
可以用普通的选择器、复合选择器、逗号隔开的列表或任何的选择器组合作为参数。
<style>
.home header p,.home footer p,.home aside p {color: red;}
.home :matches(header,footer,aside) p { color: red; }
</style>
游览器支持:无

 

相关伪类 :has()
这个伪类选择器通过一个参数(选择器列表),去匹配与某一元素对应的任意选择器。举个最简单的例子,在这个例子中任何带有<img>的<a>元素都会加个黑色的边框:
<style>
a:has( > img ) { border: 1px solid red;}
</style>
在第二个例子中,我会把:has和:not结合,选择不带有<p>的<li>元素:
<style>
li:not(:has(p)) { border: 1px solid red; }
</style>
游览器支持:无

 

超链接伪类 :any-link
是为任何具有href属性指定样式的快捷方式,包括a、area和link元素等,也能按照下面的方式使用:
游览器支持:Chrome/Opera/Firefox(需要私有前缀)
<style>
:link,:visited {color: #555;}
</style>
代替写法:
<style>
:any-link { color: #555;}</style>

 

:focus-within
这是一个有趣的选择器,我可以明确地看到它是有用的。:focus-within不仅会选择获得焦点的元素,还会选择其父元素
游览器支持:无
<style>
input:focus-within { outline: yellow solid 1px;}
</style>
<div>
<label for=”email”>Email:</label>
<input type=”email” id=”email”>
</div>
这不仅会导致获得焦点的input元素有黄色的外轮廓,其父元素div也有同样的外轮廓。

 

拖放伪类 :drop and :drop()
在APPs中,拖放是很基础但又重要的功能。这两个选择器在改善用户体验上是很有价值的。
游览器支持:无

<style>
.spot { background: #ccc;}
.spot:drop { background: hotpink;}
</style>
没有拖动时,.spot元素会有一个灰色背景;但当用户开始拖动.spot元素时,其背景色会改变,直到元素被放下。

本文作者:jiangyp 转载请注明来自:携程设计委员会