在单纯使用HTML的过程中，设置网页每个标签元素的样式会很麻烦，对于每个标签都要进行样式设置的话，那么无疑代码量会十分庞大，尤其有很多标签的样式是相同的，代码过多的重复，冗余，使得html的代码可读性不高。因此，如果有一种方法能将一些表示样式的代码抽离出来，那么就可以解决HTML代码对样式的重复定义，提高了后期样式的可维护性。而CSS就是完美的html样式的拯救者，CSS就是指层叠样式表，用来定义网页的显示效果，用它来定义html代码中的样式，那么无疑可以使得html语言更加简洁，并且维护性更高，因此，CSS将网页内容与显示样式进行解耦分离，不仅提高了显示功能，而且提高了可维护性。本文主要讲解CSS中的几种选择器。
1.标签选择器
标签选择器的格式一般是：标签名{属性1:属性值1;.......属性n:属性值n;}。以下通过一个实例来看标签选择器的效果。
<html>
<head>
<style type="text/css">
div {
background-color: red;
}
p {
background-color: green;
}
</style>
</head>
<body>
<div>这是标签选择器，div当使用div标签选择器</div>
<p>p选择器应当选择p标签选择器</p>
<h1>没有h1选择器，那么h1就用默认的</h1>
</body>
</html>
得到网页如下：
以上定义了一个div标签的选择器和一个p标签的选择器，那么使用相应的标签时，便会自动调用相应的选择器。以上并没有定义h1相应的选择器，所以h1标签使用时所有配置是默认的。
2.分组选择器
何为分组选择器，就是一些配置相同的标签选择器，可以将其组合，避免重复代码。具体实现如下：
<html>
<head>
<title>HTML示例</title>
<style type="text/css">
div,p {
font-family:Serif;
font-size:80px;
background-color: green;
}
</style>
</head>
<body>
<div>使用了组合选择器的div选择器</div>
<p>使用了组合选择器的p选择器</p>
</body>
</html>
查看效果：
可以看出使用上述组合选择器，便可以节省不少代码。
3.派生选择器
其实这个选择在代码上看起来与分组选择器十分相似，仅有无逗号之分，但是意义上却大有不同。
<html>
<head>
<title>HTML示例</title>
<style type="text/css">
div em {
font-family:Serif;
font-size:80px;
background-color: green;
}
</style>
</head>
<body>
<div>使用了派生<em>选择器</em></div>
<em>这是em的内容</em>
</body>
</html>
查看效果：
以上示例可以看出，前者表示父标签，后者表示子标签，派生选择器只对最小标签才有效果，比如上面的 div em中div表示父标签，而em表示子标签，只有两者一起使用时选择器才有效果，并且有效果的内容是em修饰的内容。允许div中有多个em标签，并且效果一致。
4.id选择器
所谓id选择器，相当于将选择器包装成一个id，如果之后有标签需要调用它，只需要在id属性值写成需要调用的选择器的名称即可。id选择器名用“#”修饰。
<html>
<head>
<title>HTML示例</title>
<style type="text/css">
#att {
font-family:Serif;
font-size:80px;
background-color: green;
}
</style>
</head>
<body>
<div id="att">使用了id<em>选择器</em><em>!!</em></div>
<em id="att">这是em调用了id选择器</em>
</body>
</html>
查看效果：
因此id选择器如果被调用的话，只需要id属性赋予相应的选择器名称即可。
5.类选择器
类选择器的用法与id选择器的用法差不多，将属性包装成一个类，如果有标签需要调用该类选择器，只需要将class属性填写成相应的值即可。注意类选择器需要用"."在名称前修饰。
<html>
<head>
<title>HTML示例</title>
<style type="text/css">
.att {
font-family:Serif;
font-size:80px;
background-color: green;
}
</style>
</head>
<body>
<div class="att">使用了类<em>选择器</em><em>!!</em></div>
<em class="att">这是em调用了类选择器</em>
</body>
</html>
查看效果：
6.属性选择器
属性选择器就是通过修饰属性，如果出现了该属性则自动调用该选择器，[value]的形式，其中value是属性名；如果出现[value1][value2]则说明需要同时出现这两个属性的标签才能调用该选择器；如果出现a[value]，则说明只能在a标签拥有value属性时，才能调用该选择器。
<html>
<head>
<title>HTML示例</title>
<style type="text/css">
[color] {
font-family:Serif;
font-size:20px;
background-color: green;
}
[color][name] {
font-family:Serif;
font-size:40px;
background-color: green;
}
a[href] {
font-family:Serif;
font-size:60px;
background-color: green;
}
</style>
</head>
<body>
<div color="red">使用了标签<em>选择器</em><em>!!</em></div>
<p name="p1" color="red">看我有什么效果</p>
<a href="www.baidu.com">百度</a>
</body>
</html>
查看效果：
7.style属性
还有一种特定的选择器，就是使用标签的style属性。
<html>
<head>
</head>
<body>
<div style="font-family:Serif;font-size:20px;background-color: green;">这是style属性</div>
</body>
</html>
查看效果：
可以看出style属性会导致标签里面的代码量过多。所以当style内容比较多的时候还是建议使用前面的选择器。
8.优先级
以下根据一段代码来区分各选择器的优先级。
<html>
<head>
<title>HTML示例</title>
<style type="text/css">
[color]{
background-color: pink;
}
#hehe1 {
background-color: orange;
}
.haha1 {
background-color: green;
}
div {
background-color: red;
}
</style>
</head>
<body>
<div color="white" class="haha1" id="hehe1" style="background-color: gray;">谁的优先级最高</div>
<div color="white" class="haha1" id="hehe1" >谁的优先级第二</div>
<div color="white" class="haha1">谁的优先级第三</div>
<div color="white" >谁的优先级第四</div>
<div >谁的优先级第五</div>
</body>
</html>
显示效果为：
根据以上结果可以看出，style属性>id选择器>类选择器>属性选择器>标签选择器。
1066
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
