css组合选择符

<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>

css组合选择符

<!--子代选择器-->
<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>

css组合选择符

<!--相邻兄弟选择器-->
<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>

css组合选择符

<!--普通兄弟选择器-->
<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>

详细点这里，可以在线运行 > 菜鸟教程-css组合选择符

题目来源牛客网

相关推荐