目录
“*”选择器
“*”可以称作“全选”选择器。我们可以用它全选所有元素，也可以用它全选某个元素的所有子元素。
全选所有元素
* {
margin: 0;
padding: 0;
}此代码常用于消除浏览器默认的内外边距。
全选某元素的所有子元素
div *{
background-color: aqua;
}元素选择器
元素选择器根据标签的名称来选择所有对应的标签。
<style>
div {
color:red;
font-size:10px;
}
</style>
<body>
<div>div被选中</div>
<p>此段落不受影响。</p>
</body>类选择器："."
类选择器是根据元素的class属性来选中元素。一个文件中，类名是可以重复的，所以我们可以通过类选择器选中不同类型的元素。
<style>
.cb{
background-color: aqua;
}
</style>
<body>
<div class="cb">
hello world
</div>
<section class="cb">
hello world
</section>
</body>id选择器："#"
id选择器根据标签的“id”属性值选择对应的标签。由于id在一个文件中是惟一的，所以id选择器选中的元素也是唯一的。
<style>
#p1 {
text-align:center;
color:red;
}
</style>
<body>
<p id="p1">id为p1的元素被选中</p>
<p>此段落不受影响。</p>
</body>以上三种选择器的优先级：id选择器 > 类选择器 > 元素选择器。优先级越高，能选择的标签就越少；优先级越低，能选择的标签就越多。
群组化选择器
当几个地方需要使用到相同的css样式的时候，分开写是一件十分麻烦的工作，而且会使代码显得冗长。这时我们可以把几个相同设定的选择器合并在一起，减少代码的数量。具体方法是把几个选择器使用逗号隔开书写在一起的一起就行了。
<style>
h1, h2, h3, h4, ul, p {
color:red;
}
</style>
<body>
<h1>群组化选择器</h1>
<h2>群组化选择器</h2>
<h3>群组化选择器</h3>
<h4>群组化选择器</h4>
<ul>
<li>群组化选择器</li>
<li>群组化选择器</li>
</ul>
<p>群组化选择器</p>
</body>层次选择器
层次选择器可以通过一个标签选择另一个与它有关系的标签，比如它的子代、后代、兄弟、邻居等元素。
后代选择器
后代选择器用空格隔开，选择指定标签下所有对应的后代标签（儿子，孙子，重孙子等等）。
<style>
div p{
color: red;
}
</style>
<body>
<div>
<p>1</p>
<p>2</p>
<p>3</p>
<ul>
<li><p>4</p></li>
<li><p>5</p></li>
<li><p>6</p></li>
</ul>
</div>
</body>子代选择器
子代选择器使用符号">"隔开，选择的是指定标签下所有符合要求的子元素，其孙子、重孙子等则不会选中。
<style>
div>p{
color: red;
}
</style>
<body>
<div>
<p>1</p>
<p>2</p>
<p>3</p>
<ul>
/* ul下的p标签不会被选中 */
<li><p>4</p></li>
<li><p>5</p></li>
<li><p>6</p></li>
</ul>
</div>
</body>兄弟选择器
兄弟选择器使用符号"~"隔开，选择的是当前标签之后的所有同级标签。需要注意的是选中的是它的兄弟，而它自己不会被选中。当使用兄弟选择器的时候，直接选择某个标签的兄弟元素的选择范围太大了，需要使用类选择器或id选择器来指明选择谁的兄弟元素。
<style>
/*选择class为name的标签的之后所有同级p标签*/
.name~p{
background-color: aqua;
}
</style>
<body>
<p class="name">1</p>
<p>2</p>
<p>3</p>
</body>相邻选择器
相邻选择器使用符号"+"隔开，选择的是当前标签的下一个同级标签，并且只能选中一个元素。
<style>
/*选中id为name的下一个p标签*/
#name+p{
color: red;
}
</style>
<body>
<p id="name">1</p>
<p>2</p>
<p>3</p>
</body>伪类选择器
鼠标事件伪类
我们平常浏览网页时会发现一个链接点击前是一个颜色，点击后又是一个颜色，甚至点击时又是一种颜色。这些设置就需要用到伪类选择器来实现了。当然，伪类选择器不仅仅是对链接生效，对所有元素都有效果。
| 名称 | 作用 |
|---|---|
| :link | 当链接没有被访问时的样式 |
| :visited | 链接已经被访问的状态 |
| :hover | 鼠标在链接上方悬停时的状态 |
| :active | 鼠标点击链接时的状态 |
<style>
a:link{
background-color: black;
}
a:hover{
background-color: white;
}
a:active{
background-color: red;
}
a:visited{
background-color: aqua;
}
</style>
<body>
<a href="https://www.csdn.net/" target="_blank">csdn</a>
</body>child型伪类
| 名称 | 作用 |
|---|---|
| p:nth-type(n) | 如果p元素的父元素的第n个子元素为p元素则选中，否则不选中 |
| p:nth-of-type(n) | 选中p元素的父元素的第n个p元素 |
| p:first-type | 如果p元素的父元素的第一个子元素为p元素则选中，否则不选中 |
| p:first-of-type | 选中p元素的父元素下第一个p元素的子元素 |
| p:nth-child(n) | 选中所有p元素的父元素的第n个子元素 |
| p:nth-last-child(n) | 选择所有p元素的父元素的倒数的第n个子元素 |
| p:nth-last-of-child(n) | 选择所有p元素倒数的第n个为p元素的子元素 |
| p:only-child | 选中所以仅有一个子元素的p元素 |
| p:only-of-type | 选中所以仅有一个子元素且为p元素的元素 |
| p:last-child | 选中所有p元素的最后一个子元素 |
| div:not(p) | 选中所有div元素的子元素中除了p元素以外的所有子元素 |
| p:empty | 选中所有没有子元素的p元素 |
注：以p元素和div元素为例
功能型伪类
| 名称 | 作用 |
|---|---|
| p:before | 在每个p元素之前插入内容 |
| p:after | 在每个p元素之后插入内容 |
注：以p元素为例
文中若有不当之处，欢迎各位朋友批评指正。
4917
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
