blog-CSS之选择器（属性选择器+伪类选择器+伪元素选择器）_属性选择器加伪类选择器一起使用-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_39285144/article/details/98095946

本文深入讲解CSS中的属性选择器、伪类选择器和伪元素选择器的使用方法，包括属性选择器的匹配规则，伪类选择器的状态相关应用，以及伪元素选择器的布局调整技巧。

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

属性选择器

1.[attribute]

选取带有attribute属性的元素
举例：

<style>
	/*选择标签中带有title属性的标签设置背景色为红色*/
		[title]{
			background-color: red;
		}
</style>
<body>
	<p>1</p>
	<p title="num">2</p>
	<p>3</p>
</body>

在这里插入图片描述

2.[attribute=value]

选择标签中带有attribute属性，并且属性值为value的标签
举例：

<style>
/*选择标签中带有title属性且属性值为num的标签设置背景色为红色*/
		[title=num]{
			background-color: red;
		}
</style>

<body>
	<p>1</p>
	<p title="num">2</p>
	<p title="one">3</p>
</body>

在这里插入图片描述

3.[attribute^=value]

选中带有attribute属性中以value开头的标签
举例：

<style>
		/*选中input标签中type的属性值以t开头的标签*/
		input[type^=t]{
			background-color: red;
		}
</style>
<body>
	<input type="text" name="">
	<input type="password" name="">
	<input type="submit" name="">
</body>

在这里插入图片描述

4.[attribute$=value]

选中带有attribute属性中以value结尾的标签
举例：

<style>
		/*选中input标签中type的属性值以t结尾的标签*/
		input[type$=t]{
			background-color: red;
		}
</style>
<body>
	<input type="text" name="">
	<input type="password" name="">
	<input type="submit" name="">
</body>

在这里插入图片描述

伪类选择器

1.与状态有关

与状态有关的伪类选择器有四种
:link        a标签还未被访问（只能使用于超链接）
:hover     光标悬浮到元素上时（可用在多个元素标签中）
:active    a标签激活（鼠标摁住不动时显示）
:visited   a标签被访问过时（只能使用于超链接）
举例：

<style>
		/*当链接未被点击访问过时字体颜色是红色*/
		a:link{
			color: red;
		}
		/*当鼠标悬浮在链接上(不点鼠标左键)时字体颜色是黄色*/
		a:hover{
			color: yellow;
		}
		/*当鼠标点击链接(按住鼠标左键不动)时字体颜色是黑色*/
		a:active{
			color: black;
		}
		/*当链接被访问(被点击过)时字体颜色是灰色*/
		a:visited{
			color: grey;
		}
</style>
<body>
	<a href="https://www.taobao.com">我是一个链接</a>
</body>

结果
在这里插入图片描述

2.与子元素相关

与子元素相关的伪类选择器有六种
:first-child 选中指定元素下的第一个子元素(即选中它的第一个儿子)

:last-child 选中指定元素下的最后一个子元素(即选中它的最后一个儿子)

:nth-child(v) 选中指定元素下的第v个子元素(v 可为数字，公式，关键字等)

举例

<style>
		/*选中class为name的div下的第一个子元素将其背景色设为红色*/
		.name>p:first-child{
			background-color: red;
		}
		/*选中class为name的div下的最后一个子元素将其背景色设为蓝色*/
		.name>p:last-child{
			background-color: blue;
		}
</style>
<body>
	<div class="name">
		<p>1</p>
		<p>2</p>
		<p>3</p>
		<div>
			<p>4</p>
			<p>5</p>
			<p>6</p>
		</div>
	</div>
</body>

在这里插入图片描述
在上述的例子中出现了一个经常会被误解的一个错误，当选中class为name的div下的最后一个p标签时，为什么3的背景颜色没有变化？
答：class为name的div(假设称外div)的子元素一共有四个，三个p标签和一个div标签，外div的第一个儿子是p标签，与css选择器中指定的p标签相同，所以1变红色，而外div的最后一个儿子是div，与选择器中指定的p并不相同，所以这个选择器里的样式不起作用，即3没有变颜色。

:first-of-type 选中指定元素下的与指定元素一致的第一个子元素(即选中儿子中指定标签元素的第一个儿子)

:last-of-type 选中指定元素下的与指定元素一致的最后一个子元素(即选中儿子中指定标签元素的最后一个儿子)

:nth-of-type(v) 选中指定元素下的与指定元素一致的第v个子元素(即选中儿子中指定标签元素的第v个儿子,v 可为数字，公式，关键字等)

举例

<style>
		/*选中div下的每个类型标签的第一个子元素将其背景色设为红色*/
		div>*:first-of-type{
			background-color: red;
		}
		/*选中div下的每个类型标签的最后一个子元素将其背景色设为蓝色*/
		div>*:last-of-type{
			background-color: blue;
		}
</style>
<body>
	<div>
		<p>1</p>
		<div>1</div>
		<p>2</p>
		<div>2</div>
		<p>3</p>
		<div>3</div>
	</div>
</body>

在这里插入图片描述

伪元素选择器

伪元素选择器常用的有以下两个
::after 在元素内部所有子元素之后添加内容

::before 在元素内部所有子元素之前添加内容

这两个伪元素选择器使用最多的作用是清除浮动造成的父元素失去高度，实现父元素的高度只适应。

通常使用以下伪元素选择器的格式来实现清除浮动

.class-name::after{
	content: "";
	display: block;
	clear: both;/*清除掉两边的浮动对象*/
}

content可以包含的内容有：
1.文本或其他字符
2.图片(使用场景：下拉列表中文字前的图标)
3.空

举例

	<style>
		/*在div下的所有p标签内容前添加一个英文before，并且是红色字体*/
		div>p::before{
			content: "before";
			color: red;
		}
		/*在div下的所有p标签内容后添加一个英文after，并且是红色字体*/
		div>p::after{
			content: "after";
			color: red;
		}
</style>
<body>
	<div>
		<p>1</p>
		<p>2</p>
		<p>3</p>
	</div>
</body>

在这里插入图片描述