6. CSS 属性选择器
来源:互联网 发布:淘宝审核部门电话 编辑:程序博客网 时间:2024/05/16 16:09
对带有指定属性的 HTML 元素设置样式。
可以为拥有指定属性的 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>
0 0
- 6. CSS 属性选择器
- css选择器-属性选择器
- CSS选择器-属性选择器
- CSS 7.3 选择器-属性选择器
- CSS选择器之属性选择器
- CSS教程:属性选择器
- CSS属性选择器详解
- 再论CSS属性选择器
- css属性选择器
- CSS属性选择器
- CSS:属性选择器
- CSS属性选择器
- CSS属性选择器
- CSS属性选择器
- 10030---CSS 属性选择器
- css 属性选择器
- CSS 属性选择器详解
- css属性选择器
- Sys.WebForms.PageRequestManagerServerErrorException: 在服务器上处理请求时出现未知错误解决办法
- Ubuntu 安装mysql和简单操作
- JAVA学习第十二天
- 鸟哥的linux私房菜学习笔记十一 ,命令权限
- 如何清晰地思考:近一年来业余阅读的关于思维方面的知识结构整理(附大幅思维导图)
- 6. CSS 属性选择器
- k最近邻算法(KNN)的简介和python实现
- 在windows下安装linux操作系统
- 链表的基本使用
- POJ 3984 迷宫问题【迷宫最短路径 bfs】
- reGeorg+proxychains-ng组合试用
- 内核模式下 信号灯
- DesignPattern之Bridge
- java学习总结及心得体会