4.7 CSS 3新增选择器前瞻[1]

本文介绍了CSS3新增的选择器,包括三种属性选择器和普通兄弟选择器。通过实例展示了如何使用这些选择器来精确地定位和样式化网页元素。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

前言:Google的Chrome对于学习最新的CSS选择器的人来说是一个好消息,因为它支持CSS3的新选择器,所以本猫也把书里面没有展开介绍的部分,重新充实了一下。当然,书已经下印厂无法修改了,但是来这里看的人们可以先睹为快了。
目前支持这3种匹配方式的属性选择器的浏览器有:IE 7.0、Firefox 2.0、Opera 9.2、Safari等。现在还有Google的Chrome。

-----------------------------------------

CSS 3在CSS 2支持的选择器的基础上,又增加了多种功能强大而且非常实用的选择器,在本节内将对这些选则器作简单介绍。

提示:读者可以访问W3C的官方网站http://www.w3.org/(英文)了解更多关于CSS3的信息。



4.7.1 更多的属性选择器

虽然到本书完稿之日,CSS 3还未正式公布,但是其部分内容已经被一些浏览器采纳并支持,例如子字符串匹配的属性选择器等。

CSS 3对属性选择器的又增加了3种子字符串的匹配方式:
1)        E[att^="val"]
匹配所有E元素中att属性的值以“val”开始的所有元素。
2)        E[att$="val"]
匹配所有E元素中att属性的值以“val”结束的所有元素。 
3)        E[att*=”val”]
匹配所有E元素中att属性的值中包含字符串“val”的所有元素。

例如有XHTML结构如下:
  1. <div class="nav-primary">class=" nav-primary"</div>
  2. <div class="content-primary">class="content-primary"</div>
  3. <div class="content-secondary">class="content-secondary"</div>
  4. <div class="tertiary-content">class="tertiary-content"</div>
  5. <div class="nav-secondary">class="nav-secondary"</div>
如果定义如下CSS规则,其显示如图4-36所示。
  1. div[class^="nav"] { background:#ff0; }
/web/css/selectors/036.gif

图4-36 E[att^="val"]选择器的应用
注意,此处的匹配与“-”无关,只是简单的字符串匹配。

如果定义如下CSS规则,其显示如图4-37所示。
  1. div[class$="primary"] { background#CF9; }
/web/css/selectors/037.gif

图4-37 E[att$="val"]选择器的应用

如果定义如下CSS规则,其显示如图4-38所示。
  1. div[class*="content"] { background#0CF; }
/web/css/selectors/038.gif

图4-38 E[att*="val"]选择器的应用

4.7.2 普通兄弟选择器

CSS 2内有相邻选择器,只匹配相邻的兄弟元素,而普通兄弟选择器则可以匹配不相邻的兄弟元素,其语法如下:
E ~ F { …… }
匹配所有F元素,如果他是E的兄弟元素,且在E之后出现。
例如有如下代码,其在浏览器内显示如图4-39所示。
  1. .test ~ p { background#FC0; }
  1. <div>
  2.   <div>div 1</div>
  3.   <p>p 1</p>
  4.   <div class="test">div 2, class="test"</div>
  5.   <p>p 2</p>
  6.   <div>div 3
  7.     <p>div 3 内的p</p>
  8.   </div>
  9.   <p>p 3</p>
  10. </div>



/web/css/selectors/039.gif

图4-39 普通兄弟选择器的应用 此日志的引用地址

GB2312 http://www.ddcat.net/blog/tback.php?id=238&encode=gb2312
UTF-8 http://www.ddcat.net/blog/tback.php?id=238&encode=utf-8
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值