本系列可作为前端学习系列的笔记，代码的运行环境是在HBuilder中，小编会将代码复制下来，大家复制下来就可以练习了，方便大家学习。
HTML系列文章 已经收录在前端专栏，有需要的宝宝们可以点击前端专栏查看！
点赞关注不迷路！您的点赞、关注和收藏是对小编最大的支持和鼓励！
系列文章目录
CSS- 3.1 盒子模型-块级元素、行内元素、行内块级元素和display属性
CSS- 4.2 相对定位（position: relative）
目录
前言
小编作为新晋码农一枚，会定期整理一些写的比较好的代码，作为自己的学习笔记，会试着做一下批注和补充，如转载或者参考他人文献会标明出处，非商用，如有侵权会删改！欢迎大家斧正和讨论！
一、CSS选择器
CSS（层叠样式表）选择器用于选择HTML元素并应用样式。它们是CSS中用于定位元素的基本工具。下面是一些CSS选择器及其用法：
1. 元素选择器
元素选择器用于选择指定类型的HTML元素。
p {
color: blue;
}上面的代码将选择所有的<p>元素，并将其文本颜色设置为蓝色。
2. 类选择器
类选择器用于选择具有特定类属性的元素。类名前面有一个点（.）。
.my-class {
font-size: 16px;
}上面的代码将选择所有具有class="my-class"的元素，并将其字体大小设置为16像素。
3. ID选择器
ID选择器用于选择具有特定ID属性的元素。ID前面有一个井号（#）。
#my-id {
background-color: yellow;
}
上面的代码将选择具有id="my-id"的元素，并将其背景颜色设置为黄色。
4. 属性选择器
属性选择器用于选择具有特定属性的元素。
[type="text"] {
border: 1px solid black;
}上面的代码将选择所有type="text"的元素，并为其添加黑色边框。
5. 后代选择器
后代选择器用于选择某个元素内的所有特定后代元素。
div p {
margin: 10px;
}上面的代码将选择所有在<div>元素内的<p>元素，并为其添加10像素的外边距。
代码实战：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>列表样式</title>
<style type="text/css">
ul{
/* list-style-position: outside; */ /* 控制标记位置 */
/* list-style-type: decimal; */ /* 用数字做标记 */
/* list-style-image: url(../img/111gif.gif); */ /* 使用图片作为标记 */
list-style-type: none; /* 移除了默认的列表标记（原本是圆点） */
}
ul li{
background-image: url(../img/111gif.gif); /* 设置自定义列表标记（图片） */
background-repeat: no-repeat; /* 防止图片平铺 */
padding-left: 40px; /* 为图片标记留出空间 */
width: 500px;
height:150px;
/* width: 200px;
height: 35px;
background-color: lightblue; 注释中展示了另一种样式方案（浅蓝色背景、边框等）
border: 1px solid cadetblue;
text-align: center; */
}
</style>
</head>
<body>
<!-- ul>li{列表$}*5 -->
<ul>
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
<li>列表4</li>
<li>列表5</li>
</ul>
<a href="../个人主题网站/index.html"><h3 align="center">返回首页</h3></a>
</body>
</html>
代码运行：
6. 子选择器
子选择器用于选择某个元素的直接子元素。
ul > li {
list-style-type: none;
}上面的代码将选择所有作为<ul>直接子元素的<li>元素，并移除其列表标记。
7. 相邻兄弟选择器
（小编认为这里的内容有点点晦涩，附了例子解释）
相邻兄弟选择器用于选择紧接在另一个元素后的元素，且二者有相同的父元素。
h1 + p {
font-weight: bold;
}上面的代码将选择所有紧接在<h1>元素后的<p>元素，并将其字体加粗。
更具体解释一下：假设一个情景，有很多<p>元素，但是只有紧跟在<h1>元素后的<p>元素才需要加粗，这时 的<h1>元素相当于一个定位符号，确定了需要加粗字号的<p>元素的位置
小编这里举个例子：
<!-- p{段落$}*4 按tab -->
<!-- 1.所有段落字体为30px -->
<!-- 2.段落二加粗变蓝 -->
<!-- 3.段落3下划线 -->
<p>段落一</p>
<p class="bule">段落二</p>
<h1>定位</h1>
<p id="id1">段落三</p>
<p >段落四</p> 这里的<h1>元素紧邻着的<p>元素，内容是段落三，先看没有添加让<h1>元素后的<p>元素字体加粗的样式时，运行内容为：
当添加让<h1>元素后的<p>元素字体加粗的样式后：可以明显看到段落三字体被加粗了。
h1 + p {
font-weight: bold;
}
注意：此时的段落四并没有被加粗，这里需要区别于通用兄弟选择器，看一下下面的例子就能明白。
8. 通用兄弟选择器
通用兄弟选择器用于选择在某个元素之后的所有兄弟元素。
h2 ~ p {
color: green;
}上面的代码将选择所有在<h2>元素之后的所有<p>元素，并将其文本颜色设置为绿色。
还是上面的例子，这里的样式使用通用兄弟选择器，没有添加通用兄弟选择器时的代码运行如下：
<!-- p{段落$}*4 按tab -->
<!-- 1.所有段落字体为30px -->
<!-- 2.段落二加粗变蓝 -->
<!-- 3.段落3下划线 -->
<p>段落一</p>
<p class="bule">段落二</p>
<h1>定位</h1>
<p id="id1">段落三</p>
<p >段落四</p>
添加了通用兄弟选择器后的样式如下：段落三和段落四的字体都被加粗
h1 ~ p {
font-weight: bold;
}
9. 伪类选择器
伪类选择器用于选择元素的特定状态。
a:hover {
color: red;
}上面的代码将选择鼠标悬停在<a>元素上时的状态，并将其文本颜色设置为红色。
这里举例，修改为：鼠标悬停在<a>元素上时，将文本颜色设置为红色
p:hover {
color: red;
}
可以看到，当鼠标悬停在段落一时，段落一字体变红。
10. 伪元素选择器
伪元素选择器用于选择元素的特定部分。
p::first-line {
font-weight: bold;
}上面的代码将选择<p>元素的第一行文本，并将其字体加粗。
这些基本选择器可以组合使用，以实现更复杂的选择和样式应用。通过灵活运用这些选择器，可以创建出丰富且响应迅速的网页设计。
二、代码实战及运行
这里举例使用的代码如下，大家可以根据给出的基本选择器的举例代码，进行运行调试：
（1）CSS基本选择器
①代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css基本选择器</title>
<style type="text/css">
/*标签选择器*/
p{
font-size:30px ;
}
/*类选择器*/
.bule{
font-weight: 700;
color: blue;
}
/*id选择器 #id名*/
#id1{
text-decoration: underline;
}
img{
position: absolute;
left: 45%;
top: 300px;
width: 100px;
}
/* h1 ~ p {
font-weight: bold;
}
p:hover {
color: red;
} */
</style>
</head>
<body>
<!-- p{段落$}*4 按tab -->
<!-- 1.所有段落字体为30px -->
<!-- 2.段落二及段落四加粗变蓝 -->
<!-- 3.段落3下划线 -->
<p>段落一</p>
<p class="bule">段落二</p>
<h1>定位</h1>
<p id="id1">段落三</p>
<p class="bule">段落四</p>
<!-- <a href="../个人主题网站/index.html"><h3 align="center">返回首页</h3></a> -->
</body>
</html>
②代码运行
（2）CSS复合选择器
①代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css复合选择器</title>
<style type="text/css">
/* 交集选择器 标签选择器类选择器 中间没有空格 */
p.p1{
color: pink;
}
/* 并集 基本选择器 中间用逗号链接* */
p,.p2,div,span{
font-size: 30px;
}
/* 后代选择器 祖辈在前 后辈在后 中间空格连接 */
div span{
text-decoration: underline;
}
div ul li span{
color: red;
}
/* 子选择器 父大于子 */
div>span{
color: green;
}
img{
position: absolute;
left:45%;
top: 300px;
width:100px;
}
</style>
</head>
<body>
<p class="p1">段落一</p>
<p class="p2">段落二</p>
<h2 class="p1">标题一</h2>
<div id="">
<span id="">希望世界和平</span>
<ul>
<li>
<span>希望世界和平222</span>
</li>
</ul>
</div>
<!-- <a href="../个人主题网站/index.html"><h3 align="center">返回首页</h3></a> -->
</body>
</html>
②代码运行
（3）伪类选择器
①代码一:超链接
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>超链接-伪类选择器</title>
<style type="text/css">
/* 未被访问 悬停 点击 访问过以后 */
/* a:link 等同于a */
/* 可以没有hover active 但是必须有Link和visited */
a:link{
color: red; /* 将未被访问的链接文本颜色设置为红色。 */
font-size: 60px;
}
a:hover{
color: pink; /* 当鼠标悬停在链接上时，将链接文本颜色更改为粉色 */
}
a:active{
color: green; /* 当链接被点击时，将链接文本颜色更改为绿色 */
}
a:visited{
color: skyblue; /* 将已被访问的链接文本颜色设置为天蓝色 */
}
</style>
</head>
<body>
<a href="cs2-1.html">新闻</a>
<a ><h3 align="center">返回首页</h3></a>
<a href="https://www.baidu.com/">百度</a>
<!-- <a href="../个人主题网站/index.html"><h3 align="center">返回首页</h3></a> -->
</body>
</html>
②代码一运行
③代码二：模拟按钮
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>模拟按钮</title>
<style type="text/css">
a：link{
color: blue;
text-decoration:none;
font-size: 40px;
border-top: 1px solid #eeeeee;
border-left: 1px solid #eeeeee;
border-right: 1px solid #717171;
border-bottom: 1px solid #717171;
}
a:visited{
background-color: blue;
color: black;
}
a:hover{
color: pink;
border-top: 1px solid #717171;
border-left: 1px solid #717171;
border-right: 1px solid #eeeeee;
border-bottom: 1px solid #eeeeee;
}
a:active{
color:green;
}
/* hover必须在link visited 之后 activ必须在hover之后
lvba lv包好 */
</style>
</head>
<body>
<a href="../个人主题网站/index.html">返回</a>
</body>
</html>
④代码运行
悬停时的按钮
总结
以上就是今天要讲的内容，本文简单记录了css选择器，仅作为一份简单的笔记使用，大家根据注释理解，您的点赞关注收藏就是对小编最大的鼓励！
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
