首页 > 代码库 > CSS样式选择器
CSS样式选择器
上面的思维导图已经大致将这六种选择器的重要点描写叙述出来了，以下用代码再一一实验一次。
1.HTML选择器（标签选择器）
将须要定义样式的元素作为选择符，在<style>标签中进行样式的定义。
<html>
<head>
<title>HTML选择器</title>
<style>
p{
color:red;
font-size:1cm;
}
b{
color:green;
font-size:50px;
}
</style>
</head>
<body>
<p>aaaaaaaaa</p>
<b>bbbbbbbb</b>
</body>
</html>执行结果：（这样的选择器应该是相对照较简单的了）
2.类选择器
（1）同一个元素使用不同的样式
<html>
<head>
<title>类选择器</title>
<style>
p{
color:yellow;
}
p.cls1{
color:red;
}
p.cls2{
color:green;
}
p.cls3{
color:blue;
}
</style>
</head>
<body>
<p>aaaaaaaaaa</p>
<p class="cls1">aaaaaaaaaa</p>
<p class="cls2">aaaaaaaaaa</p>
<p class="cls3">aaaaaaaaaa</p>
</body>
</html>执行结果：
（2）去掉[tag],使选择器适用全部元素，允许一个元素能够在单个标签中同一时候使用多个选择器
<html>
<head>
<title>类选择器</title>
<style>
p{
color:yellow;
}
.cls1{
color:red;
}
.cls2{
font-size:1cm;
border:2px solid green;
}
.cls3{
color:blue;
}
</style>
</head>
<body>
<p>aaaaaaaaaa</p>
<p class="cls1 cls2">aaaaaaaaaa</p>
<a href=http://www.mamicode.com/"http://www.baidu.com" class="cls2">baidu
>
执行结果：
3.ID选择器（一定要注意每一个ID属性值在html都是唯一存在的）
<html>
<head>
<title>ID选择器</title>
<style>
#first{
color:yellow;
}
#second{
color:red;
}
#third{
font-size:1cm;
border:2px solid green;
}
#forth{
color:blue;
}
</style>
</head>
<body>
<p id="first">aaaaaaaaaa</p>
<p id="second">aaaaaaaaaa</p>
<a href=http://www.mamicode.com/"http://www.baidu.com" id="third">baidu
>
执行结果：
4.关联选择器
<html>
<head>
<title>关联选择器</title>
<style>
div #first .two p{
color:red;
font-size:2cm;
}
</style>
</head>
<body>
<div>
<div id="first">
<div >
<div class="two">
<p>aaaaaaaaaaaa</p>
</div>
</div>
</div>
</div>
</body>
</html>
执行结果：
由于这里涉及到了标签之间的嵌套关系，所以简单提一下样式的继承：
全部嵌套在某个HTML标签中的HTML标签都会继承外层标签设置的样式。
实验代码：
<html>
<head>
<title>样式继承</title>
<style>
#first{
color:red;
font-size:2cm;
background-color:green;
}
</style>
</head>
<body>
<div id="first">
<div>
<p>aaaaaaaaa</p>
</div>
</div>
</body>
</html>
执行结果：
5.组合选择器（选择符之间用逗号隔开，别和关联选择器弄混了）
<html>
<head>
<title>关联选择器</title>
<style>
#first,.one,h1,p{
color:red;
font-size:1cm;
background-color:green;
}
</style>
</head>
<body>
<p>aaaaaaaaa</p>
<h1>aaaaaaaa<h1>
<u id="first">aaaaaaaaa</u><br>
<em class="one">aaaaaaaa</em>
</body>
</html>
执行结果：
6.伪元素选择器
<html>
<head>
<title>组合样式选择器</title>
<style>
a:link{
color:green;
font-size:1cm;
}
a:hover{
color:red;
font-size:2cm;
}
a:visited{
yellow:red;
font-size:1cm;
}
p:first-letter{
color:red;
font-size:3cm;
}
p:first-line{
color:yellow;
font-size:20px;
}
</style>
</head>
<body>
<a href=http://www.mamicode.com/"http://www.baidu.com">baidu
>
执行结果：
这是鼠标没有放上去的时候，鼠标放上去后，链接会发生变化，例如以下图：
其它的就不多演示了。基本上这些选择器的使用方法都用代码过一遍了，剩下的就是靠我们活学活用。可不是简单的来个标签看看效果了，所以大家共勉吧。
CSS样式选择器
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。