css属性选择器，就是选择相应属性的标签，改变他的样式
格式：[属性名]{}
例如：
[
class
]{
color: red;
}
</style>
</head>
<body>
<h2
class
="aa">我是标题</h2>
<p
class
="cc">我是段落</p>
<p
class
="aa">我是段落</p>
<p
class
="bb">我是段落</p>
<p
class
="dd">我是段落</p>
<p
class
="aa">我是段落</p>
<p id="yy">我是段落</p>
<p id="tt">我是段落</p>
</body>
</html>
效果：
此时选择了有class属性的标签，所以，有class属性的标签的文字都被设置成了红色。不管是h2还是p，只要有class属性，都设置了样式
当我要选择有class="aa"属性的标签时，我就可以用[class="aa"]{}来设置样式，例如：
[
class="aa"
]{
color: red;
}
</style>
</head>
<body>
<h2
class="aa"
>我是标题</h2>
<p class="cc">我是段落</p>
<p
class="aa"
>我是段落</p>
<p class="bb">我是段落</p>
<p class="dd">我是段落</p>
<p
class="aa"
>我是段落</p>
<p id="yy">我是段落</p>
<p id="tt">我是段落</p>
</body>
</html>
效果如下：
同样，不管是h2还是p，只要有class属性且值是aa的标签，都会被选择。
用文字标签只是为了举例。用途比较广泛。
属性选择器还有其他几个，分为3类，如下：
1、属性取值以什么开头的
[属性名|=属性值开头]{} <!--css2-->
[属性名^=属性值开头]{} <!--css3-->
区别：css2中的所需要的取值开头是隔开的取值，例如
[alt|=adc]{}
假设下面有很多有alt属性的标签
alt="abc-def-eee"
alt="abc def eee"
alt="abcdefeee"
css2的只会识别第一个和第二个，应为开头的abc与其他的内容被东西隔开了。
css3的不会，只要写出[alt^=abc]，开头是abc的都会被选择。
2、属性取值以什么结尾的
[属性名$=属性值结尾]{} <!--css3-->
3、属性取值包含什么的
[属性名~=包含的属性值]{} <!--css2-->
[属性名*=包含属性值]{} <!--css3-->
区别：同样的，css2中要求的包含属性值，是与其他内容有分隔符隔开的，css3中的
则不需要。
综上所诉，我们要根据具体情况使用不同的属性选择器，css2中的选择器了解就好，css3的需要熟练使用。结合标签选择器、class选择器、id选择器、序选择器以及属性选择器综合练习。
1415
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
