位置：首页>> 网络编程>> 网页设计>> 详解CSS3中的属性选择符（2）

详解CSS3中的属性选择符（2）

作者：dudo　来源：dudo says　发布时间：2008-04-24 14:30:00　

标签：选择符,伪类,css3,浏览器

子串匹配的属性选择符

这一组的选择符都新加的，他允许开发者对属性中的子字符串来进行匹配。

假设HTML文档中包含下面的代码结构：

<div id="nav-primary"></div>
<div id="content-primary"></div>
<div id="content-secondary"></div>
<div id="tertiary-content"></div>
<div id="nav-secondary"></div>

通过使用子串匹配的属性选择符就可以找到文档中这些结构性的特定组合。

下面的规则将为id以“nav”开头的div元素设定背景颜色：

div[id^="nav"] { background:#ff0; }

上例中选择符会匹配div#nav-primary和div#nav-secondary。

要找到id以primary结尾的div元素，可以使用下面的规则：

div[id$="primary"] { background:#ff0; }

这时选择符将匹配div#nav-primary和div#content-primary。

下面的规则将会匹配到id中含有content子字符串的的div中：

div[id*="content"] { background:#ff0; }

受影响的元素有：div#content-primary、div#content-secondary和div#tertiary-content。

子串匹配的属性选择符已经在最新版本的Mozilla、Firefox、Flock、Camino、Safari、OmniWeb以及Opera中可以使用，但是如果IE中还不支持的话，我们最好还是先不要使用他们（作者在写这篇文章时IE还在开发中，如今IE7、IE8都支持这些选择符，dudo注）。

目标伪类

含有识别标识的url（一个#后面紧跟锚点名称或者元素的id）指向的是文档中的特定元素。链向其他目标元素的这些元素就可以使用:target伪类来修饰它。如果当前的URL中没有任何的片断识别标识，:target伪类将不会匹配任何元素。

还是以上面提到的代码结构为例，如果URL中包含content-primary标识时，现在的规则将会在他外围增加一个边框：

div#content-primary:target { outline:1px solid #300; }

URL是类似这样的形式的：
http://www.example.com/index.html#content-primary。
基于Mozilla和Safari的浏览器已经支持:target伪类。

UI元素状态伪类

:ENABLED伪类和:DISABLED伪类
在浏览器允许改变表单控件外观的前提下，:enabled伪类和:disable伪类允许开发者指定用户界面中可用和不可用元素（表单元素）的显示样式。下面的规则将会根据单行输入框是否可用设定不同的背景颜色：

input[type="text"]:enabled { background:#ffc; }
input[type="text"]:disabled { background:#ddd; }

第一页上一页 1

3 4 5 下一页

投稿

详解CSS3中的属性选择符（2）

猜你喜欢