css组合选择符

最新推荐文章于 2025-02-07 11:50:33 发布

iG乐芙兰

最新推荐文章于 2025-02-07 11:50:33 发布

阅读量491

点赞数 1

分类专栏： CSS 文章标签： CSS选择器

本文链接：https://blog.youkuaiyun.com/H_X_xx/article/details/88372947

版权

CSS 专栏收录该内容

1 篇文章

订阅专栏

<style type="text/css">
 
    div.demo{
        color: black;
    }
    div.wrap .demo{
        color: yellow;
    }
    div.wrap > .demo{
        color: blue;
    }
    div.wrap + .demo{
        color: red;
    }
    div.demo + .demo{
        color: red;
    }
 </style>
 
<div class="wrap">
    <div class="demo">
        Hello
    </div>
  <div class="demo">
    World
  </div>
</div>

Hello 和 world 两个单词分别是什么颜色？

CSS组合选择符：

后代选择器（以空格分隔）
子元素选择器（以 > 分隔）
相邻兄弟选择器（以 + 分隔）
普通兄弟选择器（以 ~ 分隔）

<!--后代选择器-->
<style>
div p
{
	background-color:yellow;
}
</style>
<body>
<div>
<p>段落 1。 在 div 中。</p>
<p>段落 2。 在 div 中。</p>
</div>

<p>段落 3。不在 div 中。</p>
<p>段落 4。不在 div 中。</p>
</body>

在这里插入图片描述

<!--子代选择器-->
<style>
div>p
{
	background-color:yellow;
}
</style>
<body>
<h1>Welcome to My Homepage</h1>
<div>
<h2>My name is Donald</h2>
<p>I live in Duckburg.</p>
</div>

<div>
<span><p>I will not be styled.</p></span>
</div>

<p>My best friend is Mickey.</p>
</body>

在这里插入图片描述

<!--相邻兄弟选择器-->
<style>
div+p
{
	background-color:yellow;
}
</style>
<body>
<h1>Welcome to My Homepage</h1>
<div>
<h2>My name is Donald</h2>
<p>I live in Duckburg.</p>
</div>

<div>
<span><p>I will not be styled.</p></span>
</div>

<p>My best friend is Mickey.</p>
</body>

在这里插入图片描述

<!--普通兄弟选择器-->
<style>
div~p
{
	background-color:yellow;
}
</style>
<body>
	
<p>之前段落，不会添加背景颜色。</p>
<div>
<p>段落 1。 在 div 中。</p>
<p>段落 2。 在 div 中。</p>
</div>

<p>段落 3。不在 div 中。</p>
<p>段落 4。不在 div 中。</p>

</body>