CSS选择器详解-CSDN博客

本文链接：https://blog.csdn.net/hfc123hfc123/article/details/72838592

本文深入讲解了CSS中属性选择器的使用方法，并通过实例演示了如何应用这些选择器来定位页面元素。此外，还介绍了nth-child与nth-of-type选择器的区别及用法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

属性选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>属性选择器</title>
		<style>
			/*属性含有class的元素*/
			li[class]{
				background-color: red;
			}
				/*选取 属性值=值 的元素*/
			li[class=X1]{
				background-color: yellow;
			}
			/*属性中的词=值*/
			li[class~=X1]{
				background-color: blue;
			}
			/*包含值*/
		li[class*=Y]{
			background-color: yellow;
		}
		/*以这个开头*/
		li[class^=Z]{
			background-color: green;
		}
		/*以什么结尾*/
		li[class$=e]{
			background-color: gold;
		}
		/*属性值是zh,或者以zh-开头的*/
		li[class|=Z1]
		{background-color: green;}
		</style>
	</head>
	<body>
		<ul>
			<li class="X1e">11</li>
			<li class="X12">X1</li>
			<li class="X3">33</li>
			<li class="X4">44</li>
			<li class="YASA">55</li>
			<li class="Z1">66</li>
			<li class="Z11">77</li>
			<li class="Z1-22">88</li>
			<li class="Z122">99</li>
			<li class="Z4">00</li>
		</ul>
	</body>
</html>

nth-child与nth-of-type：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			h1:nth-child(2){
				background-color: red;
			}
			/*基数*/
			h1:nth-child(odd){
				background-color: red;
			}
			/*偶数*/
			h1:nth-child(even){
				background-color: green;
			}
			h1:nth-child(3n+1){background-color: yellow;}
			h1:nth-of-type(2){
				background-color: blue;
			}
		</style>
	</head>
	<body>
		<div>
			<div>111</div>
			<h1>22222</h1>
			<h1>22222</h1>
			<h1>22222</h1>
			<h1>22222</h1>
			<h1>22222</h1>
		</div>
		<div>
			<h1>22222</h1>
			<h1>22222</h1>
			<h1>22222</h1>
			<h1>22222</h1>
			<h1>22222</h1>
		</div>
	</body>
</html>

可以看出nth-child渲染父元素的第二个子控件若是p

nth-of-child渲染父元素下的p元素的第二个p