div>p 與 div p的區別

一個是子類選擇器,一個是後代選擇器。

div>p 是子類選擇器,選擇所有div的所有子元素中p元素(不包括孫子類元素)。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo</title>
    <style>
        div > p {
            color: red;
        }
    </style>
</head>
<body>
<div>
    <span>
      <p>1</p>
    </span>

    <p>2</p>

    <p>3</p>

    <p>4</p>
</div>
<hr>
<b>div>p選中了2 3 4</b>
</body>
</html>
效果如下所示:



div p 是後代選擇器,選擇所有div中所包含的所有p元素(包括孫子類元素)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo</title>
    <style>
        div p {
            color: red;
        }
    </style>
</head>
<body>
<div>
    <span>
      <p>1</p>
    </span>

    <p>2</p>

    <p>3</p>

    <p>4</p>
</div>
<hr>
<b>div p選中了1 2 3 4</b>
</body>
</html>
效果如如下所示:



發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章