CSS基础之复合选择器

729 10-29

CSS复合选择器

外层标签写在前面，内层的标签写在后面，之间用空格分隔，标签嵌套时内层的标签成为外层标签的后代。

就是首先要符合外层标签然后还符合内层标签，这样的就可以被后代选择器修饰了。

<style>
	div h3{
		color: red;
	}
</style>

<div>
	<h3>苹果</h3>
</div>

由两个选择器直接连接构成，选中二者各自元素范围的交集。

第一个必须是标签选择器，第二个必须是类选择器或者ID选择器，选择器之间不能有空格，必须连续书写。

<style>
	h3.aa {
		color: red;
	}
	h3#bb {
		color: green;
	}
</style>

<h3 class="aa">类选择器的情况</h3>
<div class="aa">香蕉</div>
<h3 id="bb">id选择器的情况</h3>

结果：

多个选择器通过逗号连接而成，利用并集选择器同时声明风格相同样式。

并集，只要符合其中一种就会被修饰。

<style>
	h3, h4, p{
		color: red;
	}
</style>

<h3>香蕉</h3>
<h4>葡萄</h4>
<p>菠萝</p>

结果：

标签： CSS