复合选择器
----重点 后代选择器,并集选择器、伪类选择器
1、后代选择器(包含选择器)
1)作用:用来选择元素或者元素组的子孙后代–更准确更精细的来选择;
2)形式:规则左边的选择器一端包括两个或多个用空格
分隔的选择器
父级 子集 {
属性1:属性值1;
属性2:属性值2;
}
其中父类选择器也可以使用标签选择器、类选择器、id的选择器等基础选择器,子类相似
3)举例说明
现在我们有三个内部标签和三个外部标签—想将3个内部标签变为红色
HTML代码和图片如下
<body>
<div>
<a href="#">内部标签1</a>
<a href="#">内部标签2</a>
<a href="#">内部标签3</a>
</div>
<a href="#">外部标签1</a>
<a href="#">外部标签2</a>
<a href="#">外部标签3</a>
</body>
[1]不可以使用标签选择器,如果使用的话每个超链接都会变为红色;
[2]可以使用基础选择器中的类选择器,但是需要在每个内部链接都写class,比较繁琐,如下
<style>
.red {
color:red;
}
</style>
<body>
<div>
<a href="#" class="red">内部标签1</a>
<a href="#" class="red">内部标签2</a>
<a href="#" class="red">内部标签3</a>
</div>
<a href="#">外部标签1</a>
<a href="#">外部标签2</a>
<a href="#">外部标签3</a>
</body>
[3]可以使用符合选择其中的后代选择器,且写起来比较简单;如下
<style>
div a {
color:red;
}
</style>
<body>
<div>
<a href="#" >内部标签1</a>
<a href="#" >内部标签2</a>
<a href="#" >内部标签3</a>
</div>
<a href="#">外部标签1</a>
<a href="#">外部标签2</a>
<a href="#">外部标签3</a>
</body>
注:规则左边的选择器一端包括两个或多个用空格分隔的选择器,相当于一个标签一个标签的打开往下寻找,类似于目录文件夹
[4]但是当我们的标签在个
中,如下
<body>
<div>
<a href="#" >内部标签1</a>
<a href="#" >内部标签2</a>
<a href="#" >内部标签3</a>
</div>
<div>
<a href="#">外部标签1</a>
<a href="#">外部标签2</a>
<a href="#">外部标签3</a>
</div>
若选择
div a {
color:red;
}
将会选中所有的div中的h标签,违背我们的最初目的----在存在相同标签而我们只想选择其中一个时可以使用类选择器或id选择器
如下
<style>
.red a {
color:red;
}
</style>
<body>
<div class="red">
<a href="#" >内部标签1</a>
<a href="#" >内部标签2</a>
<a href="#" >内部标签3</a>
</div>
<div>
<a href="#">外部标签1</a>
<a href="#">外部标签2</a>
<a href="#">外部标签3</a>
</div>
</body>
[5]也可是多个标签 、
举例:
<body>
<!--ul>li*3-->
<ul>
<li>dog</li>
<li>dog</li>
<li>dog</li>
</ul>
<!--.wangsicong生成div标签-->
<div class="wangsicong">
<ul>
<li>王可可</li>
<li>王可可</li>
<li>王可可</li>
</ul>
</div>
</body>
我们想要王可可变为红色;如下(三标签)
<style>
.wangsicong ul li {
color:red;
}
</style>