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>