css3的复合选择器、后代选择器和并集选择器的用法

- 编辑:慢熊科技 -

css3的复合选择器、后代选择器和并集选择器的用法
1.复合选择器
我们这两端段代码为例,讲解css的复合问题
<h3 class="fuhe">css3的复合选择器的用法</h3>
<h3>第二段文字</h3>
CSS文件这样写:h3.fuhe{color:red;}
在当前复合情况下,只有第一段代码的文字才会变成red,而第二段不会,h3.fuhe{color:red;}这个代码的意思是只有h3.fuhe这两个标签同时存在的情况下,才会起到{}里面的样式作用,只有一个标签的则不会出现上述css样式,我们也可以这样理解:是在h3 下面的fuhe标签才会显示上述css样式。
 复合选择器与后代选择器
这中复合标签在大量的css的ID或者class聚拢在一起的情况下使用,比如我希望我的class里面的所有li都是color:red,但是我又希望的我第一行h2标签是加粗strong,这个时候我们可以用.class.h3{}
2.后代选择器
以这段代码为例

<div class=”hd1”>
<ul>
<li>北京</li>
<li>上海</li>
<li>广州</li>
</ul>
</div>
<div class=”hd2”>
<ul>
<li>武汉</li>
<li郑州</li>
<li>深圳</li>
</ul>
</div>

.hd1 li{}    .hd2 li{}属性后代标签,意思为在hd1下面的li标签进行css样式,浏览器在处理这个样式的时候,是先从子标签开始的,浏览器将先找到所有li标签,然后再找上级标签。我们可以理解为hd1下面的li标签进行css样式。
3.并集选择器
如下列所示,h3,span,h5{}。即,当这些标签的所有css样式或者部分样式完全相同的时候,可以使用。