ddc
联网
Dreamweaver Flash Photoshop 其它周边 web标准 asp php .net CSS WAP网站攻略 专题
网站建设 域名注册 网站建设 虚拟主机 广州网站设计 域名注册 广州网站建设 上海网站建设 虚拟主机 广州网页设计 虚拟主机 域名注册 acg王国 ACG玩家 品牌设计 上海网站建设
求创科技
网站建设
中国互联
素材出售
中国设计秀
中资源
当前位置:网络学院首页 >> 设计教程 >> web标准 >> 详解Css3中的属性选择符

详解Css3中的属性选择符 (2)

来源:中国设计秀    作者:佚名    点击:466     加入收藏
子串匹配的属性选择符

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

假设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; }&nbsp;
上例中选择符会匹配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都支持这些选择符)。

目标伪类

含有识别标识的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; }
0
顶一下
[1] [2] [3] [4] [5]
2008-06-19 00:40:00    出处:中国设计秀cnwebshow.com
Google
网站地图 | 关于我们 | 联系我们 | 网站建设 | 广告服务 | 版权声明 | 免责声明 | 网站公告 | 友情链接 | 留言 | 旧版入口