0
点赞
收藏
分享

微信扫一扫

033.层次选择器

狐沐说 2022-07-15 阅读 79

1.层次模型:

033.层次选择器_选择器

 


 2.层次选择器

     1、后代选择器:在某个元素的后面    祖爷爷   爷爷    爸爸   你 

 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>2021-11-21</title>
</head>
<style type="text/css">
/*后代选择器*/
body p{
background: #0000FF;
}
</style>
<body>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<ul>
<li>
<p>p4</p>
</li>
<li>
<p>p5</p>
</li>
<li>
<p>p6</p>
</li>
</ul>
</body>
</html>

     2.子选择器:一代 ,儿子

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>2021-11-21</title>
</head>
<style type="text/css">
/*子选择器*/
body>p{
background: #000000;
}
</style>
<body>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<ul>
<li>
<p>p4</p>
</li>
<li>
<p>p5</p>
</li>
<li>
<p>p6</p>
</li>
</ul>
</body>
</html>

   3.相邻兄弟选择器 : 同辈

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>2021-11-21</title>
</head>
<style type="text/css">
/*相邻兄弟选择器:只有一个,相邻,(向下)*/
.active + p{
background: #0000FF;
}
</style>
<body>
<p>p0</p>
<p class="active">p1</p>
<p>p2</p>
<p>p3</p>
<ul>
<li>
<p>p4</p>
</li>
<li>
<p>p5</p>
</li>
<li>
<p>p6</p>
</li>
</ul>

<p class="active">p7</p>
<p>p8</p>
</body>
</html>

    4.通用选择器:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>2021-11-21</title>
</head>
<style type="text/css">
/*通用兄弟选择器:当前选中元素所有向下的兄弟元素*/
.active~p{
background: #0000FF;
}
</style>
<body>
<p>p0</p>
<p class="active">p1</p>
<p>p2</p>
<p>p3</p>
<ul>
<li>
<p>p4</p>
</li>
<li>
<p>p5</p>
</li>
<li>
<p>p6</p>
</li>
</ul>
<p>p7</p>

</body>
</html>

 



举报

相关推荐

0 条评论