css属性选择器
对带有指定属性的 HTML 元素设置样式。
可以为拥有指定属性的 HTML 元素设置样式，而不仅限于 class 和 id 属性。
实例:
**1.**下面是包含指定值的target属性的元素样式的例子
a[target]{
background: gray;
}
//带有target属性的链接会得到灰色的背景
**2.**下面是包含指定值的target属性的元素样式的例子
a[target=blank]{
background-color: green;
}
//target="_blank"的链接会得到绿色的背景
另外有关target属性的：
-
target="_blank"–>点击连接后会新开一个窗口来打开指定网址。
-
target="_top"–>点击链接后会在当前框架的顶层窗口打开指定网址。
-
省略不写或写target="_self"–>点击链接后会在当前窗口打开指定网址。
3. 属性和值的选择器 - 多值
下面是包含指定值的title属性的元素样式的例子，使用（~）分隔属性和值:
[title~=flower]
//选择title属性包含单词“flower”的元素，并设置其样式
4.下面是包含指定值的lang属性的元素样式的例子，使用（|）分隔属性和值:
[lang|=en]
//选择lang属性值以“en”开头的元素并设置其样式
5.下面是包含指定值的class属性的元素样式的例子:
div[class^="test"]{
background:#ccc;
}
//设置class属性值以“test”开头的所有div元素的背景颜色
6. 下面是包含指定值的class属性的元素样式的例子:
div[class$="test"]{
background: #ccc;
}
//设置class属性值以“test”结尾的所有div元素的背景色
7.下面是包含指定值的class属性的元素样式的例子:
div[class*="test"]{
background:#fff;
}
//设置class属性值包含“test”的所有div元素的背景颜色
深入属性选择器：
No.1 如果你想让含标题（title）的所有元素变色，可以这样写，代码如下：
<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://www.baidu.com/">Baidu</a>
<hr />
<h1>无法应用样式：</h1>
<h2>Hello world</h2>
<a href="www.baidu.com/">Baidu</a>
</body>
</html><!--这个例子就可以充分表明如果用[title]就不能把[herf]所属元素变色-->
No.2 对有 href 属性的锚（a 元素）应用样式：
把No.1中的[title]改为“a[href]”就行了。
No.3还可以根据多个属性进行选择，只需将属性选择器链接在一起即可。
即继续把上述重点处改成：
a[href][title]{
color:#fff;
}<!--这样既把a[href]属性的元素变色了，也将[title]属性中的元素的颜色也改变了。
No.4 其实把链接变成别的颜色还可以这样弄：
<html>
<head>
<style type="text/css">
a[href="http://www.baidu.com/"]
{
color: red;
}
</style>
</head>
<body>
<h1>还可以应用样式：</h1>
<a href="http://www.baidu.com/">About Baidu</a>
<hr />
No.5还可以把多个属性-值选择器链接在一起来选择一个文档:
把No.4中的代码改成这样：
a[href="http://www.baidu.com/"][title="Baidu"]
<!--....代码相同的地方省略了-->
<h1>还可以应用样式：</h1>
<a href="http://www.Baidu.com/" title="Baidu">W3School</a>
No.6 如果你的html中有一大堆图片或者别的元素（这里只给出图片的修改）要修改为同一大小，你可以先把图片名称都改为形如这样（picture-1.jpg picture-2.jpg picture-3.jpg…==），你可以这样写：
img[src|="picture"] {
border: ;
height: ;
width: ;
<!--......==属性值自己填,这样写的话就方便多了，不需要一个一个在去修改了-->
}
扫一扫
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
