CSS- 1.1 css选择器

本系列可作为前端学习系列的笔记，代码的运行环境是在HBuilder中，小编会将代码复制下来，大家复制下来就可以练习了，方便大家学习。

HTML系列文章已经收录在前端专栏，有需要的宝宝们可以点击前端专栏查看！

系列文章目录

CSS- 1.1 css选择器

CSS- 2.1 实战之图文混排、表格、表单

CSS- 3.1 盒子模型-块级元素、行内元素、行内块级元素和display属性

系列文章目录

前言

一、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>