CSS复合选择器的总结归纳

最新推荐文章于 2025-06-18 15:19:41 发布

原创最新推荐文章于 2025-06-18 15:19:41 发布 · 1.6k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#css #复合选择器 #前端初级

css 专栏收录该内容

1 篇文章

订阅专栏

本文深入解析CSS复合选择器的五种类型：交集、并集、后代、子元素和伪类选择器，通过实例代码展示每种选择器的应用场景，帮助读者掌握更精细的元素定位技巧。

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

CSS复合选择器的总结归纳

定义：复合选择器是由两个或多个基础选择器，通过不同的方式组合而成的,目的是为了可以选择更准确更精细的选中目标元素标签。

分类：复合选择器共可分为5类，分别为交集选择器，并集选择器，后代选择器，子元素选择器和伪类选择器。

1.交集选择器
交集选择器由两个选择器组成。其中第一个选择器为标签选择器，第二个选择器为类名选择器。两个选择器之间用点隔开。
交集选择器是并且的意思。即…又…的意思
如div.red。示例代码如下：

div.red{
		color: red;
	}
<div class="red">交集选择器</div>

这样类名为class的标签的颜色就会变为红色。
2.并集选择器
并集选择器是各个选择器之间以逗号隔开，任何形式的选择器都可以作为并集选择器的一部分。如果某些选择器定义的样式相同即可用并集选择器来处理。
并集选择器有和的意思，也就是说，只要逗号隔开的，所有选择器都会执行后面的样式。
如div,p,span。示例代码如下：

div,p,span{
		color: red;
	}
<div>并集选择器</div>
<p>并集选择器</p>
<span>并集选择器</span>

这样这三个标签的颜色就都会变为红色
3.后代选择器

后代选择器又称为包含选择器，用来选择元素或元素组的后代，其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔。当标签发生嵌套时，内层标签就成为外层标签的后代。

子孙后代都可以这么选择。或者说，它能选择任何包含在内的标签。
如div p。示例代码如下：

div p{
		color: pink;
	}
<div>
		<p>王思聪</p>
</div>

这样王思聪的颜色就会变为粉色。
4.子元素选择器
子元素选择器只能选择作为某元素子元素的元素。其写法就是把父级标签写在前面，子级标签写在后面，中间跟一个 > 进行连接，注意，符号左右两侧各保留一个空格。
白话：这里的子指的是亲儿子不包含孙子重孙子之类。
比如：ul>li>a。示例代码如下：

ul>li>a{
		color: green;
	}
<ul>
		<li>
			<a href="#">一级菜单</a>
			<div>
				<a href="#">二级菜单</a>
				<a href="#">二级菜单</a>
				<a href="#">二级菜单</a>
			</div>
		</li>
	</ul>

这样一级菜单的颜色就会变为绿色。
5.伪类选择器
伪类选择器用于向某些选择器添加特殊的效果。比如给链接添加特殊效果，比如可以选择第1个，第n个元素。
伪娘
类 .one
伪类 :link
链接伪类选择器

link /* 未访问的链接 */
visited /* 已访问的链接 */
hover /* 鼠标移动到链接上 */
active /* 选定的链接 */

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
	/*未访问过的链接状态*/
	a:link {
		color:red;
		font-size: 25px;
		text-decoration: none;
	}
	/*鼠标经过链接时候的样子*/
	a:hover{
		color: green;
	}
	/*鼠标按下时候的样子*/
	a：active{
		color: yellow;
	}
	/*访问过的样子*/
	a:visited{
		color: black;
	}


	</style>
</head>
<body>
	<a href="http://www.asdf.com" target="blank" >秒杀</a>

	
</body>
</html>