css样式之选择器组合规则

最新推荐文章于 2024-02-02 09:19:55 发布

在bug上写代码

最新推荐文章于 2024-02-02 09:19:55 发布

阅读量255

点赞数 1

分类专栏：前端文章标签： css 选择器组合规则

本文链接：https://blog.csdn.net/weixin_45826787/article/details/120930186

版权

前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

一、组合关系：与

筛选同时满足所有选择器的标签

语法：多个选择器通过空格组合
例子：

<!DOCTYPE html>
<html>
	<head>
		<title>测试页面</title>
	</head>
	
	<style>
		/* 选择所有div标签中包含id属性值为“divId2”的标签 */
		div #divId2{
			color: red;
		}
	</style>
	
	<body>
		<div id="divId1">div标签1</div>
		<div id="divId2" class="divClass">div标签2</div>
	</body>
</html>

二、组合关系：或

筛选满足其中一个或多个选择器的标签

语法：多个选择器中间通过逗号组合
例子：

<!DOCTYPE html>
<html>
	<head>
		<title>测试页面</title>
	</head>
	
	<style>
		/* 选择所有div标签或者满足id属性为“divId1”或者class属性为“divClass”的标签 */
		div,#divId1,.divClass{
			color: red;
		}
	</style>
	
	<body>
		<a href="www.baidu.com"/>
		<div id="divId1">div标签1</div>
		<div class="divClass">div标签2</div>
	</body>
</html>

三、兄弟选择器

选择同一子集中的下一个满足选择器的标签

语法：选择器1+选择器2 { 样式 }
例子：

<!DOCTYPE html>
<html>
	<head>
		<title>测试页面</title>
	</head>
	
	<style>
		/* 选择a标签中下一个存在calss="divClass"属性的标签 */
		a+.divClass{
			color: red;
		}
	</style>
	
	<body>
		<a href="www.baidu.com"/>
		<div id="divId1">div标签1</div>
		<div class="divClass">div标签2</div>
	</body>
</html>

四、子集选择器

选择指定父标签下满足条件的子标签

语法：父选择器>子选择器 { 样式 }
例子：

<!DOCTYPE html>
<html>
	<head>
		<title>测试页面</title>
	</head>
	
	<style>
		/* 选择id="divId1"标签内的id="spanId"的子标签 */
		#divId1>#spanId{
			color: red;
		}
	</style>
	
	<body>
		<a href="www.baidu.com"/>
		<div id="divId1">div标签1
			<span id="spanId">span标签</span>
		</div>
		<div class="divClass">div标签2</div>
	</body>
</html>

在bug上写代码

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
css样式之选择器组合规则

一、组合关系：与筛选同时满足所有选择器的标签语法：多个选择器通过空格组合例子：<!DOCTYPE html><html> <head> <title>测试页面</title> </head> <style> /* 选择所有div标签中包含id属性值为“divId2”的标签 */ div #divId2{ color: red; } </style> <bo
复制链接

扫一扫

专栏目录