本系列可作为前端学习系列的笔记，代码的运行环境是在HBuilder中，小编会将代码复制下来，大家复制下来就可以练习了，方便大家学习。
HTML系列文章 已经收录在前端专栏，有需要的宝宝们可以点击前端专栏查看！
系列文章目录
CSS- 1.1 css选择器
CSS- 2.1 实战之图文混排、表格、表单
目录
系列文章目录
前言
一、CSS选择器
1. 元素选择器
2. 类选择器
3. ID选择器
4. 属性选择器
5. 后代选择器
6. 子选择器
7. 相邻兄弟选择器
8. 通用兄弟选择器
9. 伪类选择器
10. 伪元素选择器
二、代码实例
1、代码实战及运行
（1）CSS基本选择器
①代码
②代码运行
（2）CSS复合选择器
①代码
②代码运行
（3）超链接-伪类选择器
①代码
②代码运行
总结
前言
小编作为新晋码农一枚，会定期整理一些写的比较好的代码，作为自己的学习笔记，会试着做一下批注和补充，如转载或者参考他人文献会标明出处，非商用，如有侵权会删改！欢迎大家斧正和讨论！
一、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像素的外边距。
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、代码实战及运行
（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>
②代码运行
总结
以上就是今天要讲的内容，本文简单记录了css选择器，仅作为一份简单的笔记使用，大家根据注释理解，您的点赞关注收藏就是对小编最大的鼓励！
方案)
