CSS的选择器
在CSS的引入中曾经讲过有三个方法，分别是行内式，嵌入式，外链式。这三种方法除行内式外都做到了结构和样式分离（外链式更加彻底）。而在使用过程中，我们也更加提倡使用外链式。那就引申出一个问题。如果CSS不直接写在对应的HTML的标签中，那怎么去把对应的样式给到自己想要给得标签呢？
这就要提到选择器了，选择器就是用来将样式准确的给到自己想到的地方，在CSS中选择器分为两大类：
-
基础选择器
- 1.标签选择器
- 2.ID选择器
- 3.类选择器
- 4.通配符选择器 复合选择器
- 1.后代选择器
- 2.子代选择器
- 3.交集选择器
- 4.并集选择器
基础选择器-标签选择器
标签选择器通过标签直接选中，会作用于页面中所有这个标签：
<style>
p{
font-size:16px;
color:#66ccff;
}
</style>
如以上代码，将会选中页面中所有的<P>标签，对其中的内容进行样式修改。
标签选择器非常简单粗暴，但却并不实用，在我们实际实用中很少会对一种标签进行全部同一样式的修改。
基础选择器-ID选择器
ID选择器与类选择器很相似，唯一不同的是ID选择器只能使用一次，而类选择器是可以反复使用的:
<head>
<title></title>
<style>
#name{
font:16px "/5b8b/4f53";
}
</style>
</head>
<body>
<div id="name">
用户名
</div>
</body>
在实际使用中也比较少的用到ID选择器。ID选择器以#开头。
基础选择器-类选择器
类选择器是使用最多的基础选择器，写法和ID很相似，但却不像ID选择器只能使用一次，而是可以被反复使用：
<head>
<title></title>
<style>
.name{
font:16px "/5b8b/4f53";
}
</style>
</head>
<body>
<div class="name">
用户名
</div>
<span class="name">爱好</span>
</body>
类选择器会被经常使用。类选择器以 . 开头。
基础选择器-通配符选择器
通配符选择器也很少使用，他的作用面比标签选择器还要广。标签选择器只作用于一种标签。而通配符选择器则是作用于整个页面的所有标签：
<style>
*{
font:16px "/5b8b/4f53";
}
</style>
通配符选择器作用面太广很少使用，以 * 来表示。
复合选择器－后代选择器
后代选择器，是复合选择器的一种，作用是在一个标签下对其后代进行选择：
<head>
<title></title>
<style>
.grade ul li{
font:16px "/5b8b/4f53";
}
</style>
</head>
<body>
<div class="grade">
<ul>
<li>小学</li>
<li>中学</li>
<li>大学</li>
</ul>
</div>
</body>
后代选择器可以准确的选择出某标签下包含的后代标签，不限制包含几层。标签与标签用空格隔开。
复合选择器-子代选择器
子代选择器和后代选择器很相似，不同的是后代选择器是不限定于某一层的，只有是包含在内就都可以选出。而子代选择器则只能选择下一代。
<head>
<title></title>
<style>
.grade>span{
font:16px "/5b8b/4f53";
}
</style>
</head>
<body>
<div class="grade">
<span>小学</span>
<span>中学</span>
<span>大学</span>
</div>
</body>
子代选择器用 > 来进行表示。
<hr/ >
复合选择器-交集选择器
交集选择器用中文来表示就是，它既是什么又是什么，相当于给了多个条件，需要同时满足才会被选出：
<head>
<title></title>
<style>
div.grade{
font:16px "/5b8b/4f53";
}
</style>
</head>
<body>
<div class="grade">今天</div>
<span class="grade">明天</span>
<div>后天</div>
</body>
上面代码的交集选择器条件是既是<div标签，类名又是.grade的。只有第一个<div>满足了。交集选择器没有符号，直接链接。
复合选择器-并集选择器
并集选择器就是同时给多个进行同一样式改变：
<head>
<title></title>
<style>
.grade,.aob{
font:16px "/5b8b/4f53";
}
</style>
</head>
<body>
<div class="grade">今天</div>
<span class="aob">明天</span>
</body>
并集选择器使用较多，中间以 ,隔开。
拓展
链接伪类选择器
伪类选择器不只有链接伪类选择器，但在这只先讲这个。
链接伪类选择器有四个属性，分别对应不同的效果：
| 属性 | 作用 |
|---|---|
| a:link | 未访问的链接样式 |
| a:visited | 已访问的链接样式 |
| a:hover | 鼠标悬停的样式 |
| a:active | 链接选中时的样式 |
在实际开发中，我们很少去写全4种样式，一般情况下只要修改下链接的默认样式，然后加个悬停样式基本就可以了：
<style>
a{
text-decoration:none;
font:16px "微软雅黑";
color:#6cf;
}
a:hover{
color:red;
}
</style>
这样页面中的所有链接就都是统一一个样式并且在鼠标悬停时会变成红色了。
以上就是本文关于选择器的总结了。
1150
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
