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

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

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>

浏览器中显示为：

这里写图片描述

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

猜你喜欢