子元素和后代元素选择器

时间 2019-12-27

标签元素后代选择器繁體版

原文原文链接

1.元素之间的关系html

父元素：直接包含子元素的有元素
子元素：直接被父元素包含的元素
祖先元素：直接或间接包含后代元素的元素，父元素也是祖先元素
后代元素：直接或间接被祖先元素包含的元素，子元素也是后代元素
兄弟元素：拥有相同父元素的元素叫作兄弟元素

<div>
    <p><span>我是p标签中的span</span>></p>
</div>

p是span的的父元素。div直接包含了p，间接包含span。spa

2.后代元素选择器
做用：选中指定元素的指定后代元素
语法：祖先元素后代元素{}code

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*
         * 将div中的span设置为绿色
         */
        div span{
            color:greenyellow;
        }
    </style>
</head>
<body>
<div>
    <span>我是div标签中的span</span>
    <p><span>我是p标签中的span</span></p>
</div>
<span>
    我是body中的span
</span>
</body>
</html>

结果：
htm

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*
         * 选中id为d1的div中的p元素中的span元素
         */
        #d1 p span{
            color:red;
        }
    </style>
</head>
<body>
<div id="d1">
    <span>我是div标签中的span</span>
    <p><span>我是p标签中的span</span></p>
</div>
<div>我是body中的div</div>
</body>
</html>

结果：
blog

3.子元素选择器
做用：选中指定父元素的指定子元素
语法：父元素>子元素
注意：IE6及如下不兼容子元素选择器it

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*
         * 为div的子元素span设置背景颜色为黄色
         */
        div > span{
            background-color: yellow;
        }
    </style>
</head>
<body>
<div>
    <span>我是div标签中的span</span>
    <p><span>我是p标签中的span</span></p>
</div>
</body>
</html>

结果：
class