CSS3基于属性选择器的子字符串来选择元素

发布日期:2015-08-17 17:17:10
你可能已经使用过现有的 CSS属性选择器来指定规则了,如下代码所示:
img[alt] {
border: 3px dashed #e15f5f;
}
这个选择器会匹配页面标签中任意一个含有 alt 属性的图片标签:
<img class="oscarMain" src="img/oscar.png" alt="atwi_oscar" />

还可以通过设定属性值来缩小匹配范围。如下代码所示:

img[alt="atwi_oscar"] {
border: 3px dashed #e15f5f;
}
这样就仅会匹配 alt 属性值为 atwi_oscar 的图片。刚才说的这些事 CSS2都能搞定。
CSS3给我们带来了什么新特性?其实就是三种“子字符串匹配”的属性选择器。
1. CSS3 的子字符串匹配属性选择器
CSS3可以让我们基于属性选择器的子字符串来选择元素。听起来有点复杂,实际上并不
深奥。换句话说,现在我们可以根据属性的部分内容来选择元素。三种匹配模式分别是:
  以特定前缀开头;
  包含特定字符串;
  以特定后缀结尾。
我们来看看具体用法。
(1)“匹配开头”的属性选择器。
“匹配开头”的属性选择器语法如下:
Element[attribute^="value"]
在实际使用中,如果我想选择网站中所有 alt 属性值以 film 开头的图片,则对应代码
如下:
img[alt^="film"] {
border: 3px dashed #e15f5f;
}
该选择器的关键字符是 ^ 符号,它的意思是“以此开头” 。
(2)“匹配包含内容”的属性选择器。
“匹配包含内容”的属性选择器语法如下:
Element[attribute*="value"]
北京网站建设中,如果我想选择网站中所有 alt 属性值中包含 film 字符串的图片,则对
应代码如下:
img[alt*="film"] {
border: 3px dashed #e15f5f;
}
该选择器的关键字符是 * 符号,它的意思是“包含” 。
(3)“匹配结尾”的属性选择器。
“匹配结尾”的属性选择器语法如下:
Element[attribute$="value"]
在实际使用中,如果我想选择网站中所有 alt 属性值以 film 结尾的图片,则对应代码
如下:
img[alt$="film"] {
border: 3px dashed #e15f5f;
}
该选择器的关键字符是 $ ,它的意思是“以此结尾” 。
2. 一个活生生的例子
这些子字符串属性选择器如何在实际工作中发挥作用呢?举一个我经常使用的 CSS3 属
性选择器的例子。假设我使用内容管理系统(如 WordPress、Concrete 或者 Magento)来
制作网站,那网站肯定有让用户添加新页面的功能。用户可能会添加一些有关他们公司
或新产品的新闻。他每在内容管理系统中添加一个新页面,生成的 HTML 代码中的
<body> 或相关标签就会包含一个特定的 ID 值,用以标识该页面,以便和其他页面区分
开来。例如某个用户爱好赛车运动并在网站上维护着一个“赛事年历”版块。这样每一
个 <body> 标签都会有一个与年份对应的 ID值:
<body id="2003">
我想让指向“赛事年历”的导航栏链接在任意一个赛车年度页面时均被高亮显示,以表
示它和“赛车年历”版块相关。我肯定不会写一个覆盖每一个未来年份的样式规则,而
是写一个以不变应万变(也可以说是防患于未然)的 CSS3规则:
body[id^="2"] .navHistory { color: #00b4ff; }
这个规则表示任意含有 .navHistory 类名的元素,只要它被包含在 ID 值以 2 开头的
<body> 中,则其文字颜色为 #00b4ff 。一个简单的规则覆盖了所有可能性。当然除非这
个网站在公元 3000年时还保持目前的样子——那时,即使我吃嘛嘛香身体倍儿棒,估计
也老得没法继续维护该网站了。

相关文章

  Copyright © 2010-2018 北京梦创义科技
公司地址:朝阳区紫芳路9号院广顺园2号楼2605A

联系我们| 关于我们| 网站地图| 北京网站建设| 北京网页设计