#今日说码栏目#第四集各类选择器

最新推荐文章于 2024-09-14 15:26:51 发布

房东的_猪

最新推荐文章于 2024-09-14 15:26:51 发布

阅读量222

点赞数 3

文章标签： html css3

本文链接：https://blog.csdn.net/Abner_/article/details/125707994

版权

本文详细介绍了CSS选择器的种类，包括常用选择器、复合选择器、关系选择器、属性选择器和伪类选择器。通过具体的需求示例，展示了如何使用这些选择器实现特定的样式效果，如改变字体颜色、大小等。

摘要由CSDN通过智能技术生成

常用选择器

1、元素选择器

作用：选中对应的标签

语法：标签名{}

例如：h1{ },h3{ },p{ }

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>元素选择器</title>
    <link rel="stylesheet" href="./测试.css">
    <style>
      h1{
        color: brown;
      }
    </style>
	</head>
	<body>
		<div>
			  <h1>将进酒</h1>
		</div>
	</body>
</html>

2、id选择器

作用：选中对应的id属性值的内容,id属性值不能复用

语法：#id属性值{ }

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>id选择器</title>
		<link rel="stylesheet" href="./测试.css" />
		<style>
			#title {
				background-color: cyan;
			}
		</style>
	</head>
	<body>
		<div id="title">
			<h1>将进酒</h1>
		</div>
	</body>
</html>

3、class选择器

作用：选中对应的class属性值的内容，可以复用属性值

语法：.class属性值 { }

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>class选择器</title>
		<link rel="stylesheet" href="./测试.css" />
		<style>
			.title {
				background-color: rgb(231, 203, 19);
			}
		</style>
	</head>
	<body>
		<div class="title">
			<h1>将进酒</h1>
		</div>
	</body>
</html>

4、通配选择器

作用：通配选择器一般情况下，用来消除根元素(html)的margin、padding的默认值。

作用范围：作用于网页界面，作用于一面网页的所有元素。

语法：*{ }

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>通配选择器</title>
		<link rel="stylesheet" href="./测试.css" />
		<style>
			* {
				margin: 0;
				padding: 0;
			}
		</style>
	</head>
	<body>
		<div class="title">
			<h1>将进酒</h1>
		</div>
	</body>
</html>

复合选择器

1、交集选择器

作用：选中符合多个选择器条件的内容

语法：选择器1选择器2选择器3···{ }

例如：div.red{},#div2.red{ }

注意：如果选择器中有元素选择器，必须把元素选择器放在前面

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>交集选择器</title>
		<link rel="stylesheet" href="./测试.css" />
		<style>
			/* 需求：将class为red的诗句变为红色，同时将class为red的div字体变为24px */
			.red {
				color: red;
			}
      /* class为red的元素有两个，但这时class为red并且元素是div的只有一个，交集选择器便是增加了筛选条件 */
			div.red {
				font-size: 24px;
			}
		</style>
	</head>
	<body>
		<p class="red">怒发冲冠，凭栏处、潇潇雨歇。</p>
		<div class="red">抬望眼，仰天长啸，壮怀激烈。</div>
	</body>
</html>

2、并集选择器

作用：同时选中多个选择器，赋予这些选择器元素相同的CSS样式。

语法：选择器1,选择器2,选择器3····{ }

例如：.red,#p2,h1{ }

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>并集选择器</title>
		<link rel="stylesheet" href="./测试.css" />
		<style>
			/* 需求：将h1,h3,class为third,id为fourth的元素中的字体颜色变为红色*/
			h1,h3,.third,#fourth {
				color: red;
			}
		</style>
	</head>
	<body>
		<h1>满江红·写怀</h1>
		<h3>岳飞·宋</h3>
		<div class="third">怒发冲冠，凭栏处、潇潇雨歇。</div>
		<div id="fourth">抬望眼，仰天长啸，壮怀激烈。</div>
	</body>
</html>

关系选择器

1、子元素选择器

作用：通过指定的父元素找到指定的子元素

语法：父元素>子元素{ }

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>关系选择器-子元素选择器</title>
		<link rel="stylesheet" href="./测试.css" />
		<style>
			/* 需求：选中class名为son的语句，将其字体颜色变为红色*/
			.parent>.son {
				color: red;
			}
		</style>
	</head>
	<body>
	<div class="parent">
      <div class="son">满江红·写怀</h1>
    </div>
	</body>
</html>

2、后代选择器

作用：通过指定的祖先元素找到指定的后代元素

语法：祖先元素后代元素{ }

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>关系选择器-后代选择器</title>
		<link rel="stylesheet" href="./测试.css" />
		<style>
		 /* 需求三：将所有的span中的字，更改为黄色 */
			#school span{
				color: yellow;
			}
		</style>
	</head>
	<body>
		<div id="school">
			学校
			<p class="p1">
				前端
				<span>web2208 </span>
				<span>web2209</span>
			</p>
			<p class="p2">
				后端
				<span>java2214</span>
				<span>java2215</span>
			</p>
			<p>设计</p>
		</div>
    </div>
	</body>
</html>

3、兄弟选择器--选择指定元素的下一个兄弟元素

作用：通过指定元素选中下一个兄弟元素

语法：兄+弟{ }

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>关系选择器-兄弟选择器-选中该元素下一个兄弟元素</title>
		<link rel="stylesheet" href="./测试.css" />
		<style>
		 /* 需求：将"贝吉塔"三个字，更改为黄色 */
     #first+li{
				color: yellow;
			}
		</style>
	</head>
	<body>
		<div id="longzhu">
			<ul>
        <li id="first">孙悟空</li>
        <li >贝吉塔</li>
        <li>特南克斯</li>
        <li>弗利沙</li>
      </ul>
		</div>
    </div>
	</body>
</html>

4、兄弟们选择器--选择下面所有的兄弟(前面指定的这个元素，不会被选中)

语法：兄～弟弟们{ }

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>关系选择器-兄弟们选择器-选择指定元素后面所有的兄弟元素</title>
		<link rel="stylesheet" href="./测试.css" />
		<style>
		 /* 需求：将"孙悟空"后面的三个人物姓名，字体更改为黄色 */
     #first~li{
				color: yellow;
			}
		</style>
	</head>
	<body>
		<div id="longzhu">
			<ul>
        <li id="first">孙悟空</li>
        <li >贝吉塔</li>
        <li>特南克斯</li>
        <li>弗利沙</li>
      </ul>
		</div>
    </div>
	</body>
</html>

属性选择器

1、属性选择器

语法：[属性名] { } 选择含有指定属性的元素

[属性名=属性值]{ } 选择含有指定属性和属性值的元素

[属性名^=属性值]{ } 选择属性值以指定值开头的元素

[属性名$=属性值]{ } 选择属性值以指定值结尾的元素

[属性名*=属性值]{ } 选择属性值含有某值的元素

需求一：有title属性名的p标签,将其中的字体颜色变为橘红色；

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>属性选择器-语法一</title>
		<link rel="stylesheet" href="./测试.css" />
		<style>
			/* 需求一：有title属性名的p标签,将其中的字体颜色变为橘红色 */
      p[title] {
				color: orangered;
			}
		</style>
	</head>
	<body>
		<p>种豆南山下</p>
		<p>草盛豆苗稀</p>
		<p>晨兴理荒秽</p>
		<p title="abc">带月荷锄归</p>
		<p title="abcda">道狭草木长</p>
		<p title="tukbcda">夕露沾我衣</p>
		<div title="abc">衣沾不足惜</div>
		<p class="abc">但使愿无违</p>
	</body>
</html>

需求二：选中属性名为title,属性值为abc，字体颜色变为蓝色

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>属性选择器-语法二</title>
		<link rel="stylesheet" href="./测试.css" />
		<style>
			/* 需求二：选中属性名为title,属性值为abc，字体颜色变为蓝色 */
			[title=abc]{
       color: blue;
      }
		</style>
	</head>
	<body>
		<p>种豆南山下</p>
		<p>草盛豆苗稀</p>
		<p class="ybm">晨兴理荒秽</p>
		<p title="abc">带月荷锄归</p>
		<p title="abcda">道狭草木长</p>
		<p title="tukbcda">夕露沾我衣</p>
		<div title="abc">衣沾不足惜</div>
		<p class="abc">但使愿无违</p>
	</body>
</html>

需求三：选中属性值以"abc"开头的那一段元素，改变其字体大小为32px

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>属性选择器-语法三</title>
		<link rel="stylesheet" href="./测试.css" />
		<style>
			/* 需求三：选中属性值以"abc"开头的那一段元素，改变其字体大小为32px */
			[title^='abc'] {
				font-size: 32px;
			}
		</style>
	</head>
	<body>
		<p>种豆南山下</p>
		<p>草盛豆苗稀</p>
		<p class="ybm">晨兴理荒秽</p>
		<p title="abc">带月荷锄归</p>
		<p title="abcda">道狭草木长</p>
		<p title="tukbcda">夕露沾我衣</p>
		<div title="abc">衣沾不足惜</div>
		<p class="abc">但使愿无违</p>
	</body>
</html>

需求四：选中属性名为title且属性值以"da"结尾的那一段元素，改变其字体颜色为紫色

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>属性选择器-语法四</title>
		<link rel="stylesheet" href="./测试.css" />
		<style>
		/* 需求四：选中属性名为title且属性值以"da"结尾的那一段元素，改变其字体颜色为紫色 */
			[title$='da'] {
				color: rgb(178, 9, 239);
			}
		</style>
	</head>
	<body>
		<p>种豆南山下</p>
		<p>草盛豆苗稀</p>
		<p class="ybm">晨兴理荒秽</p>
		<p title="abc">带月荷锄归</p>
		<p title="abcda">道狭草木长</p>
		<p title="tukbcda">夕露沾我衣</p>
		<div title="abc">衣沾不足惜</div>
		<p class="abc">但使愿无违</p>
	</body>
</html>

需求五：选中属性名为title且属性值中含有"b"结尾的那一段元素，改变其字体颜色为黄色

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>属性选择器-语法五</title>
		<link rel="stylesheet" href="./测试.css" />
		<style>
			/* 需求五：选中属性名为title且属性值中含有"b"结尾的那一段元素，改变其字体颜色为黄色 */
			[class*='b'] {
				color: yellow;
			}
		</style>
	</head>
	<body>
		<p>种豆南山下</p>
		<p>草盛豆苗稀</p>
		<p class="ybm">晨兴理荒秽</p>
		<p title="abc">带月荷锄归</p>
		<p title="abcda">道狭草木长</p>
		<p title="tukbcda">夕露沾我衣</p>
		<div title="abc">衣沾不足惜</div>
		<p class="abc">但使愿无违</p>
	</body>
</html>

伪类选择器

1、伪类（不存在的类，特殊的类）

-伪类用来描述一个元素的特殊状态

-比如：第一个元素，被点击的元素，鼠标移入的元素

-特点：一般请情况下，使用：开头

①、 :first-child 选中第一个子元素

②、 :last-child 选中最后一个子元素

③、 :nth-child() 选中选中第n个子元素

-特殊值： n 选中所有的子元素

2n或even 选中偶数

2n+1或odd 选中奇数

-（以上这些伪类都是根据所有的子元素进行排序）

①、:first-of-type 选中第一个子元素

②、:last-of-type 选中最后一个子元素

③、:nth-of-type() 选中第n个子元素

(功能跟上面相似，不同的是，这是在同类型的子元素中去选择）

2、否定伪类类名:not( ) 如：li:not( )

作用： -将符合条件的元素从选择器中去除，选中剩下的所有的元素

需求一：将ul里的第一个li一直设置为红色

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>伪类选择器- :first-of-type</title>
		<link rel="stylesheet" href="./测试.css" />
		<style>
			/* 需求一：将ul里的第一个li一直设置为红色*/
			li:first-of-type {
				color: red;
			}
		</style>
	</head>
	<body>
		<h1>沁园春·雪</h1>
		<ul>
			<span>测试</span>
			<li>望长城内外，惟余莽莽；大河上下，顿失滔滔。</li>
			<li>北国风光，千里冰封，万里雪飘。</li>
			<li>山舞银蛇，原驰蜡象，欲与天公试比高。</li>
			<li>须晴日，看红装素裹，分外妖娆。</li>
			<li>江山如此多娇，引无数英雄竞折腰。</li>
			<li>惜秦皇汉武，略输文采；唐宗宋祖，稍逊风骚。</li>
			<li>一代天骄，成吉思汗，只识弯弓射大雕。</li>
		</ul>
	</body>
</html>

需求二：将ul里的最后一个元素一直设置为橙色

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>伪类选择器- :last-child</title>
		<link rel="stylesheet" href="./测试.css" />
		<style>
			/* 需求二：将ul里的最后一个元素一直设置为橙色*/
			li:last-child {
				color: rgb(254, 110, 7);
			}
		</style>
	</head>
	<body>
		<h1>沁园春·雪</h1>
		<ul>
			<span>测试</span>
			<li>望长城内外，惟余莽莽；大河上下，顿失滔滔。</li>
			<li>北国风光，千里冰封，万里雪飘。</li>
			<li>山舞银蛇，原驰蜡象，欲与天公试比高。</li>
			<li>须晴日，看红装素裹，分外妖娆。</li>
			<li>江山如此多娇，引无数英雄竞折腰。</li>
			<li>惜秦皇汉武，略输文采；唐宗宋祖，稍逊风骚。</li>
			<li>一代天骄，成吉思汗，只识弯弓射大雕。</li>
		</ul>
	</body>
</html>

需求三：将ul里的偶数个元素设置为黄色(以ul里面所有的元素为基准)

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>伪类选择器-:nth-child(even)</title>
		<link rel="stylesheet" href="./测试.css"/>
		<style>
			/* 需求三：将ul里的偶数个元素设置为黄色(以ul里面所有的元素为基准) */
			li:nth-child(even) {
				color: yellow;
			}
		</style>
	</head>
	<body>
		<h1>沁园春·雪</h1>
		<ul>
			<span>测试</span>
			<li>望长城内外，惟余莽莽；大河上下，顿失滔滔。</li>
			<li>北国风光，千里冰封，万里雪飘。</li>
			<li>山舞银蛇，原驰蜡象，欲与天公试比高。</li>
			<li>须晴日，看红装素裹，分外妖娆。</li>
			<li>江山如此多娇，引无数英雄竞折腰。</li>
			<li>惜秦皇汉武，略输文采；唐宗宋祖，稍逊风骚。</li>
			<li>一代天骄，成吉思汗，只识弯弓射大雕。</li>
		</ul>
	</body>
</html>

需求四：除了第三个li元素，其他元素全部设置为紫色

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>伪类选择器-:nth-child(even)</title>
		<link rel="stylesheet" href="./测试.css"/>
		<style>
			/* 需求四：除了第三个li元素，其他元素全部设置为紫色 */
			li:not(.third) {
				color: rgb(137, 59, 246);
			}
		</style>
	</head>
	<body>
		<h1>沁园春·雪</h1>
		<ul>
			<span>测试</span>
			<li>望长城内外，惟余莽莽；大河上下，顿失滔滔。</li>
			<li>北国风光，千里冰封，万里雪飘。</li>
			<li class="third">山舞银蛇，原驰蜡象，欲与天公试比高。</li>
			<li>须晴日，看红装素裹，分外妖娆。</li>
			<li>江山如此多娇，引无数英雄竞折腰。</li>
			<li>惜秦皇汉武，略输文采；唐宗宋祖，稍逊风骚。</li>
			<li>一代天骄，成吉思汗，只识弯弓射大雕。</li>
		</ul>
	</body>
</html>

需求五：将第四个li元素一直设置为蓝色

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>伪类选择器-:nth-of-type()</title>
		<link rel="stylesheet" href="./测试.css" />
		<style>
			/* 需求五：将第四个li元素一直设置为蓝色 */
			li:nth-of-type(4) {
				color: blue;
			}
		</style>
	</head>
	<body>
		<h1>沁园春·雪</h1>
		<ul>
			<span>测试</span>
			<li>望长城内外，惟余莽莽；大河上下，顿失滔滔。</li>
			<li>北国风光，千里冰封，万里雪飘。</li>
			<li class="third">山舞银蛇，原驰蜡象，欲与天公试比高。</li>
			<li>须晴日，看红装素裹，分外妖娆。</li>
			<li>江山如此多娇，引无数英雄竞折腰。</li>
			<li>惜秦皇汉武，略输文采；唐宗宋祖，稍逊风骚。</li>
			<li>一代天骄，成吉思汗，只识弯弓射大雕。</li>
		</ul>
	</body>
</html>

需求六：选中所有元素,将其元素设置为粉色

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>伪类选择器-:nth-child(n)</title>
		<link rel="stylesheet" href="./测试.css" />
		<style>
			/* 需求六：选中所有元素,将其元素设置为粉色 */
      ul:nth-child(n){
       color: pink;
      }
		</style>
	</head>
	<body>
		<h1>沁园春·雪</h1>
		<ul>
			<span>测试</span>
			<li>望长城内外，惟余莽莽；大河上下，顿失滔滔。</li>
			<li>北国风光，千里冰封，万里雪飘。</li>
			<li class="third">山舞银蛇，原驰蜡象，欲与天公试比高。</li>
			<li>须晴日，看红装素裹，分外妖娆。</li>
			<li>江山如此多娇，引无数英雄竞折腰。</li>
			<li>惜秦皇汉武，略输文采；唐宗宋祖，稍逊风骚。</li>
			<li>一代天骄，成吉思汗，只识弯弓射大雕。</li>
		</ul>
	</body>
</html>

需求七：选中li中的奇数元素,将其元素设置为粉色(以ul中的li所有的元素为基准)

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>伪类选择器-:nth-of-type(odd)</title>
		<link rel="stylesheet" href="./测试.css" />
		<style>
			/* 需求七：选中li中的奇数元素,将其元素设置为粉色(以ul中的li所有的元素为基准)*/
			li:nth-of-type(odd) {
				color: pink;
			}
		</style>
	</head>
	<body>
		<h1>沁园春·雪</h1>
		<ul>
			<span>测试</span>
			<li>望长城内外，惟余莽莽；大河上下，顿失滔滔。</li>
			<li>北国风光，千里冰封，万里雪飘。</li>
			<li class="third">山舞银蛇，原驰蜡象，欲与天公试比高。</li>
			<li>须晴日，看红装素裹，分外妖娆。</li>
			<li>江山如此多娇，引无数英雄竞折腰。</li>
			<li>惜秦皇汉武，略输文采；唐宗宋祖，稍逊风骚。</li>
			<li>一代天骄，成吉思汗，只识弯弓射大雕。</li>
		</ul>
	</body>
</html>