CSS中，选择器用来指定网页上我们想要样式化的HTML元素，CSS选择器提供了很多种方法，使得选择要样式化的元素时，可以做到很精细的地步。
CSS选择器是CSS规则的第一部分。它是元素和其他部分组合起来告诉浏览器哪个HTML元素应当应用规则中的CSS属性值的方式。在代码中是指 { } 前面的部分。
1、选择器列表
如果你有多个使用相同样式的CSS选择器，那么这些单独的选择器可以通过 “,” 作为连接符，合并为一个“选择器列表”，样式规则就可以应用到所有的单个选择器上。
例如：h1 和 .blue 类由相同的CSS：
h1 {
color: blue;
}
.blue {
color: blue;
}我们可以将其进行合并：
h1,
.blue {
color: blue;
}合并后的写法与合并前的写法都能将对应的样式规则应用到选择器选择的元素上。
接下来介绍几种常用的CSS选择器类型
2、类型选择器
按照标签类型进行元素选择的选择器称为类型选择器：
<html>
<head>
<meta charset="utf-8">
<title>类型选择器</title>
<style type="text/css">
body {
background-color: grey;
}
p {
color: green;
}
h5 {
color: orange;
}
</style>
</head>
<body>
<p>这是段落1</p>
<h5>这是标题1</h5>
<p>这是段落2</p>
<h5>这是标题2</h5>
<p>这是段落3</p>
<h5>这是标题3</h5>
</body>
</html>页面效果：
可见标签名称与类型选择器相同的元素都被应用了对应的样式。当页面需要对特定的元素统一设置样式的时候就可以使用类型选择器。网页所有的元素标签都可以作为类型选择器进行样式设定。
3、id选择器
id选择器通过元素的id选择元素，书写时需使用 “#” 字符加上元素id作为选择器：
<html>
<head>
<meta charset="utf-8">
<title>id选择器</title>
<style type="text/css">
#pSecond {
color: green;
}
</style>
</head>
<body>
<p>这是段落1</p>
<p id="pSecond">这是段落2</p>
<p>这是段落3</p>
</body>
</html>页面效果：
可见id选择器 #pSecond 选中了 id="pSecond" 的元素（即段落2）进行样式设置。当需要单独设置某个元素的样式时可以采用id选择器进行设置。
4、类选择器
类选择器以点“ . ”加上类名的方式组成，类选择器将匹配 class 属性包含对应类名的元素进行样式设置，单个元素可以设置多个类名，匹配多个样式规则，类名之间使用空格间隔：
<html>
<head>
<meta charset="utf-8">
<title>类选择器</title>
<style type="text/css">
.green {
color: green;
}
.big {
font-size: 24px;
}
</style>
</head>
<body>
<p class="green">这是段落1</p>
<p class="big">这是段落2</p>
<p class="green big">这是段落3</p>
</body>
</html>页面效果：
可见class="green big"的段落三既应用了.green选择器的样式，也应用了.big选择器的样式。
5、伪类选择器：
CSS的伪类选择器有很多种，本篇只介绍几个常用的类型
:hover：鼠标悬停在元素上方时应用的样式
:first-child： 符合选择匹配规则的第一个元素应用的样式
:last-child： 符合选择匹配规则的最后一个元素应用的样式
:nth-child(n) ：符合选择匹配规则的第n个元素应用的样式
<html>
<head>
<meta charset="utf-8">
<title>伪类选择器</title>
<style type="text/css">
a {
color: black;
}
a:hover {
color: blue;
}
p:first-child {
color: green;
}
p:last-child {
color: red;
}
p:nth-child(2) {
color: orange;
}
</style>
</head>
<body>
<h4><a href="https://www.csdn.net">CSDN首页</a></h4>
<div>
<p>这是第1段</p>
<p>这是第2段</p>
<p>这是第3段</p>
<p>这是第4段</p>
</div>
</body>
</html>页面效果：
当鼠标停于“CSDN首页”文字上时，该段文字显示为蓝色。
6、后代选择器
两个选择器以空格间隔可以构成后代选择器，选择器将匹配满足第一个选择器匹配规则的元素的所有后代元素（子级元素及可能存在的更多层的子级元素）中满足第二个选择器匹配规则的元素：
<html>
<head>
<meta charset="utf-8">
<title>后代选择器</title>
<style type="text/css">
div {
border: 1px solid black;
}
.title {
width: 600px;
font-size: 20px;
}
.wrap {
width: 600px;
height: 600px;
}
.top,
.bottom {
width: 580px;
height: 100px;
}
.main {
width: 580px;
height: 370px;
}
.left,
.right {
display: inline-block;
width: 270px;
height: 360px;
}
.wrap span {
color: green;
}
</style>
</head>
<body>
<div class="title">
<span>后代选择器</span>
</div>
<div class="wrap">
<div class="top">
<span>这里是顶部</span>
</div>
<div class="main">
<div class="left">
<span>这里是中部左侧</span>
</div>
<div class="right">
<span>这里是中部右侧</span>
</div>
</div>
<div class="bottom">
<span>这里是底部</span>
</div>
</div>
</body>
</html>页面效果：
其中 .wrap span 组成后代选择器，匹配了 class="wrap" 的元素的所有后代元素中 标签名为 span 的元素。
7、子代选择器
当使用 “>” 作为分隔符连接选择器时，构成子代选择器，它只会在匹配满足前方选择器匹配条件的元素的直接后代（子元素）中进行后续选择器的匹配：
<html>
<head>
<meta charset="utf-8">
<title>子代选择器</title>
<style type="text/css">
div {
border: 1px solid black;
}
.title {
width: 600px;
font-size: 20px;
}
.wrap {
width: 600px;
height: 600px;
}
.top,
.bottom {
width: 580px;
height: 100px;
}
.main {
width: 580px;
height: 370px;
}
.left,
.right {
display: inline-block;
width: 270px;
height: 360px;
}
.wrap>div {
border: 2px solid red;
}
.wrap>div>span {
color: green;
}
</style>
</head>
<body>
<div class="title">
<span>子代选择器</span>
</div>
<div class="wrap">
<div class="top">
<span>这里是顶部 wrap的子级的子级</span>
</div>
<div class="main">
<div class="left">
<span>这里是中部左侧 wrap的子级的子级的子级</span>
</div>
<div class="right">
<span>这里是中部右侧 wrap的子级的子级的子级</span>
</div>
</div>
<div class="bottom">
<span>这里是底部 wrap的子级的子级</span>
</div>
</div>
</body>
</html>页面效果：
其中 .wrap>div 以及 .wrap>div>span 都是子代选择器，匹配的都是其直接子代的元素。
8、相邻兄弟选择器
两个选择器以“+”相连，组成相邻兄弟选择器，当第二个元素紧跟在第一个元素之后，并且两个元素都是属于同一个父元素的子元素，则第二个元素将被选中：
<html>
<head>
<meta charset="utf-8">
<title>相邻兄弟选择器</title>
<style type="text/css">
button+button {
margin-left: 30px;
}
</style>
</head>
<body>
<button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<button>按钮4</button>
</body>
</html>页面效果：
其中 button+button 为相邻兄弟选择器，匹配了所有前方相邻有button元素的button元素，即除了第一个button以外的button。
本篇介绍的CSS选择器就到这里，还有很多有用的选择器就不在这里介绍了，实际页面中很可能会出现多个选择器都匹配了同一个元素，但是设置的样式有冲突的情况。样式冲突的时候浏览器会有自己的样式选择覆盖规则，本篇不做介绍，初学者尽量避免出现样式冲突的情况。
9084
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
