子元素和後代元素選擇器

時間 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