05-CSS复合选择器之后代选择器

最新推荐文章于 2022-12-06 19:23:03 发布

乖女子@@@

最新推荐文章于 2022-12-06 19:23:03 发布

阅读量349

点赞数

本文链接：https://blog.csdn.net/qq_43260366/article/details/107725982

版权

复合选择器

----重点后代选择器，并集选择器、伪类选择器
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>

乖女子@@@

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
05-CSS复合选择器之后代选择器

复合选择器1、后代选择器（包含选择器)1）作用：用来选择元素或者元素组的子孙后代–更准确更精细的来选择；2）形式：规则左边的选择器一端包括两个或多个用空格分隔的选择器父级子集 {属性1：属性值1；属性2：属性值2；}其中父类选择器也可以使用标签选择器、类选择器、id的选择器等基础选择器，子类相似3)举例说明现在我们有三个内部标签和三个外部标签—想将3个内部标签变为红色HTML代码和图片如下<body> <div> <a href
复制链接

扫一扫