CSS3选择器——2、层次选择器

最新推荐文章于 2024-06-05 16:49:46 发布

yezis

最新推荐文章于 2024-06-05 16:49:46 发布

阅读量6.9k

点赞数 11

分类专栏： CSS 文章标签： css3

本文链接：https://blog.csdn.net/yezis/article/details/43818167

版权

CSS 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="zh-CN">

	<head>
		<meta charset="utf-8" />
		<title>CSS3选择器——2、层次选择器</title>
		<style type="text/css">
			*{
				margin: 0px;
				padding: 0px;
			}
			body{
				width: 300px;
				margin: 0 auto;
			}
			div{
				margin: 5px;
				padding: 5px;
				border: 1px solid #ccc;
			}	
		</style>
	</head>
	
	<body>
		<div>1</div>
		<div class="active">2</div>
		<div>3</div>
		<div>4
			 <div>5</div>
			 <div>6</div>
		</div>
		<div>7
			 <div>8
			 	  <div>9
			 	  	   <div>10</div>
			 	  </div>
			 </div>
		</div>
		
	</body>

</html>

关于层次选择器，为了方便我们的陈述，创建了上面的文档，运行结果如下：

1、后代选择器

修改文档中的CSS样式，在末尾添加如下内容：

div div{
	background-color: orange;
}

重新运行页面

但凡一个div的上层还是div元素的都被变成了橘红色

2、子选择器

在CSS样式中添加

body > div{
	background-color: green;
}

运行结果

我们看到只有与body元素有直接关系（父子关系）的元素才会被变成绿色，这也是子选择器与后代选择器的区别

3、相邻兄弟选择器

在css中兄弟关系是指两个同级别，拥有同一个父元素的两个或两个以上元素的关系，例如文档中的div1、2、3、4、7，而相邻关系是指div2在div1之后

如果我们仅仅想把div2相邻的div改变颜色，需要用到相邻兄弟选择器

.active + div{
	background-color: lime;
}

运行结果如下：

可以看出，颜色改变仅仅是在div2之后的div3，没有包含div2之前的div1

4、通用兄弟选择器

相邻兄弟选择器可以把元素之后的一个兄弟元素选择上，而通用兄弟选择器可以把元素之后的所有兄弟元素都选择上

.active ~ div{
	background-color: red;
}

运行结果如下：

yezis

关注

11
点赞
踩
5

收藏

觉得还不错? 一键收藏
3
评论
CSS3选择器——2、层次选择器

CSS3选择器——2、层次选择器 *{ margin: 0px; padding: 0px; } body{ width: 300px; margin: 0 auto; } div{ margin: 5px; padding: 5px; border: 1px solid #ccc; }
复制链接

扫一扫

专栏目录