6. CSS 属性选择器
2015-08-02 15:25
489 查看
对带有指定属性的 HTML 元素设置样式。
可以为拥有指定属性的 HTML 元素设置样式,而不仅限于 class 和 id 属性。
注释:只有在规定了 !DOCTYPE 时,IE7 和 IE8 才支持属性选择器。在 IE6 及更低的版本中,不支持属性选择。
属性选择器
下面的例子为带有 title 属性的所有元素设置样式:
[title]
{
color:red;
}
属性和值选择器
下面的例子为 title=”W3School” 的所有元素设置样式:
[title=W3School]
{
border:5px solid blue;
}
属性和值选择器 - 多个值
下面的例子为包含指定值的 title 属性的所有元素设置样式。适用于由空格分隔的属性值:
下面的例子为带有包含指定值的 lang 属性的所有元素设置样式。适用于由连字符分隔的属性值:
可以为拥有指定属性的 HTML 元素设置样式,而不仅限于 class 和 id 属性。
注释:只有在规定了 !DOCTYPE 时,IE7 和 IE8 才支持属性选择器。在 IE6 及更低的版本中,不支持属性选择。
属性选择器
下面的例子为带有 title 属性的所有元素设置样式:
[title]
{
color:red;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <style type="text/css"> [title] { color:red; } </style> </head> <body> <h1>可以应用样式:</h1> <h2 title="Hello world">Hello world</h2> <a title="W3School" href="http://w3school.com.cn">W3School</a> <hr /> <h1>无法应用样式:</h1> <h2>Hello world</h2> <a href="http://w3school.com.cn">W3School</a> </body> </html>
属性和值选择器
下面的例子为 title=”W3School” 的所有元素设置样式:
[title=W3School]
{
border:5px solid blue;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <style type="text/css"> [title=W3School] { border:5px solid blue; } </style> </head> <body> <h1>可以应用样式:</h1> <img title="W3School" src="/i/w3school_logo_white.gif" /> <br /> <a title="W3School" href="http://w3school.com.cn">W3School</a> <hr /> <h1>无法应用样式:</h1> <p title="greeting">Hi!</p> <a class="W3School" href="http://w3school.com.cn">W3School</a> </body> </html>
属性和值选择器 - 多个值
下面的例子为包含指定值的 title 属性的所有元素设置样式。适用于由空格分隔的属性值:
[title~=hello] { color:red; } //空格
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <style type="text/css"> [title~=hello] { color:red; } </style> </head> <body> <h1>可以应用样式:</h1> <h2 title="hello world">Hello world</h2> <p title="student hello">Hello W3School students!</h1> <hr /> <h1>无法应用样式:</h1> <h2 title="world">Hello world</h2> <p title="student">Hello W3School students!</p> </body> </html>
下面的例子为带有包含指定值的 lang 属性的所有元素设置样式。适用于由连字符分隔的属性值:
[lang|=en] { color:red; } // - 连字符
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <style type="text/css"> [lang|=en] { color:red; } </style> </head> <body> <h1>可以应用样式:</h1> <p lang="en">Hello!</p> <p lang="en-us">Hi!</p> <hr /> <h1>无法应用样式:</h1> <p lang="us">Hi!</p> <p lang="zh">Hao!</p> </body> </html>
相关文章推荐
- 5. CSS 类选择器
- 获取非行间样式,数组
- CSS背景图拉伸不变形
- css入门——选择器
- 关于CSS样式的层叠顺序
- CSS浮动文摘
- css命名规范
- CSS 哪些属性默认会继承, 哪些不会继承
- 常见的块状元素与内联元素小结
- 当设置display:inline;时li的宽度无效的解决方法
- 两列等高布局 padding+margin的负值 CSS布局奇淫技巧之-多列等高
- css布局笔记
- 如何用CSS写一个三角形
- 十步图解CSS的position
- 8_1_html_id选择器_几种样式表
- CSS整理(4)
- IE浏览器和主流浏览器对css样式背景透明,字体不透明的处理方法
- 我的前端学习笔记 css3 gradient,transform,transition ,弹性盒子
- CSS中的伪元素简介
- CSS优先级与继承