4.2 子元素选择器和后代元素选择器

最新推荐文章于 2023-07-08 17:36:30 发布

苍鹰蛟龙

最新推荐文章于 2023-07-08 17:36:30 发布

阅读量798

点赞数

分类专栏： HTML+CSS 文章标签： css 子元素选择器后代元素选择器

本文链接：https://blog.csdn.net/u010502101/article/details/80849043

版权

HTML+CSS 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

子元素一定是后代元素，后代元素不一定是子元素。

1、后代元素选择器

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <!--
            为id为d1的所有后代元素设置为红色，包括子元素
        -->
        <style type="text/css">
            #d1 span{
                color: red;
            }
        </style>
    </head>
    <body>
        <div id="d1">
            <span>丁香一样的颜色</span>
            <p>
                <span>丁香一样的芬芳</span>
            </p>
        </div>
        <div>丁香一样的忧愁</div>
    </body>
</html>

浏览器显示为：
这里写图片描述

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <!--
            为id为d1，且d1的后代为p，且p的后代为span的元素设置样式
            作用：
                - 选中指定元素的指定后代元素
                - 语法：
                    祖先元素 后代元素{}
        -->
        <style type="text/css">
            #d1 p span{
                color: red;
            }
        </style>
    </head>
    <body>
        <div id="d1">
            <span>丁香一样的颜色</span>
            <p>
                <span>丁香一样的芬芳</span>
            </p>
        </div>
        <div>丁香一样的忧愁</div>
    </body>
</html>

浏览器中显示为：
这里写图片描述

2、子元素选择器

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
        /*
             * 为div的子元素为span的元素设置样式
             * 子元素选择器
             *  - 作用：
             *      - 选中指定父元素的指定子元素
             *  - 语法：
             *      父元素 > 子元素
             * 
             * IE6及以下的浏览器不支持子元素选择器
            */
            div > span{
                color: red;
            }
        </style>
    </head>
    <body>
        <div id="d1">
            <span>丁香一样的颜色</span>
            <p>
                <span>丁香一样的芬芳</span>
            </p>
        </div>
        <div>
            <span>丁香一样的忧愁</span>
        </div>
    </body>
</html>

浏览器中显示为：

这里写图片描述

苍鹰蛟龙

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
4.2 子元素选择器和后代元素选择器

子元素一定是后代元素，后代元素不一定是子元素。1、后代元素选择器&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;!-- 为id
复制链接

扫一扫

专栏目录