CSS属性选择器
来源:互联网 发布:软件鲁棒性 编辑:程序博客网 时间:2024/05/16 16:57
简单属性选择
例子:如果希望把包含标题(title)的所有元素变为红色,可以写作:
*[title] {color:red;}
例子:可以只对a标签的href属性使用应用样式:
a[href] {color:red;}
a[href][title] {color:red;}
根据具体属性值选择
例子:希望将指向Web服务器的某个指定文档的超链接变成红色,可以写成
a[href="http://www.w3school.com.cn/about_us.asp"] {color: red;}
例子:与简单属性选择器类似,可以把多个属性值选择器链接在一起来选择一个文档。
a[href="http://www.w3school.com.cn/"][title="W3School"] {color: red;}
根据部分属性值选择
如果需要根据属性值中的词列表的某个词进行选择,则需要使用波浪号(~)。
如果希望选择class属性中包含important的元素,可以用下面这个选择器做到这一点。
p[class~="important"] {color: red;}
注意:如果忽略了波浪号,则说明需要完成完全值匹配。
该选择器等价于我们在类选择器中讨论过的点号类名记法。
也就是说,p.important 和p[class="important"] 应用到HTML文档是等价的。
需要“~=”属性选择器的原因是它能用于任何属性,而不只是class。
例子:
img[title~="Figure"] {border: 1px solid gray;}
这个规则会选择 title 文本包含 "Figure" 的所有图像。没有 title 属性或者 title 属性中不包含 "Figure" 的图像都不会匹配。
子串匹配属性选择器
例子:如果希望指向W3School的所有链接应用样式,不必为所有这些链接指定class,再根据这个类编写样式,而只需要编写以下规则:=
a[href*="w3school.com.cn"] {color: red;}
特定属性选择类型
*[lang|="en"] {color: red;}
上面这个规则会选择 lang 属性等于 en 或以 en- 开头的所有元素。因此,以下示例标记中的前三个元素将被选中,而不会选择后两个元素:
<p lang="en">Hello!</p><p lang="en-us">Greetings!</p><p lang="en-au">G'day!</p><p lang="fr">Bonjour!</p><p lang="cy-en">Jrooana!</p>
0 0
- css选择器-属性选择器
- CSS选择器-属性选择器
- CSS 7.3 选择器-属性选择器
- CSS选择器之属性选择器
- CSS教程:属性选择器
- CSS属性选择器详解
- 再论CSS属性选择器
- css属性选择器
- CSS属性选择器
- CSS:属性选择器
- CSS属性选择器
- 6. CSS 属性选择器
- CSS属性选择器
- CSS属性选择器
- 10030---CSS 属性选择器
- css 属性选择器
- CSS 属性选择器详解
- css属性选择器
- SQLServer 实用语法大全
- google 最佳实践 - ListView优化 (Making ListView Scrolling Smooth)
- SAP本地化-银企直连
- VS2010常用快捷键
- C++中如何正确使用const
- CSS属性选择器
- C++中的模板特化
- 小强的HTML5移动开发之路(9)——坦克大战游戏3
- Eclipse 配置安装 Flex 插件
- jQuery应用--$.post,$.get,$.getJSON提交方式
- iOS UIBezierPath类
- .net截取指定长度汉字超出部分以指定的字符代替
- UEditor jsp版上传图片自定义路劲配置
- Eclipse中如何修改SVN的地址