本节内容:
CSS 属性选择器的例子。
对带有指定属性的 HTML 元素设置样式,属性选择器可以根据元素的属性及属性值来选择元素。
例1、为带有 title 属性的所有元素设置样式:
复制代码 代码示例:
<style type="text/css">
[title]
{
color:red;
}
</style>
<h2 title="Hello world">Hello world</h2>
例2、为 title="W3School" 的所有元素设置样式:
复制代码 代码示例:
<style type="text/css">
[title='W3School']
{
border:5px solid blue;
}
</style>
<a title="W3School" href="http://w3school.com.cn">W3School</a>
例3、为表单设置样式
复制代码 代码示例:
input[type="text"]
{
width:150px;
display:block;
margin-bottom:10px;
background-color:yellow;
font-family: Verdana, Arial;
}
input[type="button"]
{
width:120px;
margin-left:35px;
display:block;
font-family: Verdana, Arial;
}
例4、将同时有 href 和 title 属性的 HTML 超链接的文本设置为红色:
复制代码 代码示例:
a[href][title]
{
color:red;
}
5、与简单属性选择器类似,可以把多个 属性-值选择器 链接在一起来选择匹配元素。
复制代码 代码示例:
a[href="http://www.w3school.com.cn/"][title="W3School"]
{
color: red;
}
参考知识:
[attribute] 用于选取带有指定属性的元素。
[attribute=value] 用于选取带有指定属性和值的元素。
[attribute~=value] 用于选取属性值中包含指定词汇的元素。
[attribute|=value] 用于选取带有以指定值开头的属性值的元素,该值必须是整个单词。
[attribute^=value] 匹配属性值以指定值开头的每个元素。
[attribute$=value] 匹配属性值以指定值结尾的每个元素。
[attribute*=value] 匹配属性值中包含指定值的每个元素( CSS2 完成之后发布的)。