CSS選擇器

時間  2019-11-08
標籤 css 選擇器 欄目 CSS 简体版
原文   原文鏈接

 

1.1 基本選擇器

1.1.1 id選擇器

1)做用：css

根據指定的id名稱，在當前界面中找到對應的惟一一個的標籤，而後設置屬性html

 

2)格式前端

id 名稱{css3

      屬性:值瀏覽器

}ide

 

3)注意點性能

一、在企業開發中若是僅僅只是爲了設置樣式，一般不會使用id，在前端開發中id一般是留給js使用的學習

二、每一個標籤均可以設置惟一一個id，id就至關於人/標籤的身份證，所以在同一界面內id毫不能重複字體

三、引用id必定要加#url

四、id的命名只能由字符、數字、下劃線組成，且不能以數字開頭，更不能是html關鍵字如p，a，img等 

1.1.2 示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #p1 {
            color: burlywood;
        }
    </style>
</head>
<body>
    <p id="p1">就是1</p>
    <p id="p2">就是2</p>
</body>
</html>
View Code

1.2 類選擇器

1.2.1 做用

1)根據指定的類名稱，在當前界面中找到對應的標籤，而後設置屬性

2)格式：

      .類名稱{

           屬性值：值

}

1.2.2 示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .p1 {
            color: yellow;
        }
    </style>
</head>
<body>
    <p class="p1">就是1</p>
    <p class="p2">就是2</p>
</body>
</html>
View Code

 

1.2.3  小練習

第一行與第三行的顏色都是紅色

第一行與第二行的字體大小都是50px

第二行與第三行內容有個下劃線

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .p1 {
            color: red;
        }
        .p2{
            font-size: 50px;
        }
        .p3{
            text-decoration: underline;
        }
    </style>
</head>
<body>
    <p class="p1 p2">就是1</p>
    <p class="p2 p3">就是2</p>
    <p class="p1 p3">就是3</p>
</body>
</html>
View Code

 

1.3 標籤選擇器

1)做用: 根據指定的標籤名稱，在當前界面中找到全部該名稱的標籤，而後設置屬性
2)格式

標籤名稱 {

    屬性：值;

}

 

3)注意點:

一、只要是HTML的標籤都能當作標籤選擇器

二、標籤選擇器選中的是當前界面中的全部標籤,而不能單獨選中某一標籤

三、標籤選擇器，不管嵌套多少層都能選中

 

1.3.1 示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>標籤選擇器</title>

    <style type="text/css">
        p {
            color: red;
        }
    </style>
</head>
<body>
    <p>這什麼</p>
    <ul>
        <li>
            <ul>
                <li>
                    <ul>
                        <li>
                            <p>這顆心叫作七巧玲瓏心，男人吃了會流淚，女人吃了會懷孕</p>
                        </li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>

</body>
</html>
View Code

1.4 通配符選擇器

一、做用:選擇全部的標籤

二、格式

* {

    屬性：值；

}

三、注意點

一、在企業開發中通常不會使用通配符選擇器

    理由是：

    因爲通配符選擇器是設置界面上全部的標籤的屬性，

    因此在設置以前會遍歷全部的標籤

    若是當前界面上的標籤比較多，那麼性能就會比較差

1.4.1 示例:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>通配符選擇器</title>

 

    <style type="text/css">

 

        * {

            color: red;

        }

 

    </style>

</head>

<body>

    <h1 >我是標題</h1>

    <p >我是段落</p>

    <a href="#">我是超連接</a>

</body>

</html>
View Code

第2章 後代選擇器、子元素選擇器

2.1 做用

1)做用: 找到指定標籤的全部後代（兒子，孫子，重孫子、、、）標籤，設置屬性

2)格式:

    標籤名1 xxx {

        屬性：值;

}

3)注意:

一、後代選擇器必須用空格隔開

二、後代不只僅是兒子，也包括孫子、重孫子

三、後代選擇器不只僅可使用標籤名稱，還可使用其餘選擇器好比id或class

四、後代選擇器能夠經過空格一直延續下去

 

2.2 示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div p {
            color: red;
        }
        #id1 li p {
            font-size: 50px;
        }


    </style>
</head>
<body>
    <div id="id1" class="part1">
        <p>我是div下的段落2</p>
        <p>我是div下的段落2</p>
        <ul>
            <li class="aaa">
                <p class="ccc">我是ul</p>
                <p class="ddd">我是ul</p>
                <a href="">點我啊1</a>
            </li>
            <li>
                <a href="">點我啊2</a>
            </li>
        </ul>
    </div>

</body>
</html>
View Code

 

2.3 子元素選擇器

2.3.1 做用

1） 做用：找到制定標籤的全部特定的直接子元素，而後設置屬性

2)格式：

    標籤名1>標籤名2 {

        屬性：值;

}

3)注意：

一、子元素選擇器之間須要用>符號連接，而且不能有空格

    好比div >p會找div標籤的全部後代標籤，標籤名爲">p"

二、子元素選擇器只會查找兒子，不會查找其餘嵌套的標籤

三、子元素選擇器不只能夠用標籤名稱，還可使用其餘選擇器,好比id或class

四、子元素選擇器能夠經過>符號一直延續下去

2.3.2 示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div p {
            color: red;
        }
        #id1 li p {
            font-size: 50px;
        }


    </style>
</head>
<body>
    <div id="id1" class="part1">
        <p>我是div下的段落2</p>
        <p>我是div下的段落2</p>
        <ul>
            <li class="aaa">
                <p class="ccc">我是ul</p>
                <p class="ddd">我是ul</p>
                <a href="">點我啊1</a>
            </li>
            <li>
                <a href="">點我啊2</a>
            </li>
        </ul>
    </div>

</body>
</html>
View Code

第3章 兄弟選擇器

3.1 相鄰兄弟選擇器，CSS2退出

3.1.1 做用

1)、做用：給指定選擇器後面緊跟的那個選擇器選中的標籤設置屬性

 

2)、格式

選擇器1+選擇器2 {

    屬性：值;

}

 

3.2 通用選擇器，CSS3推出

3.2.1 做用

1）做用：給指定選擇器後面的全部選擇器中的全部標籤設置屬性

 

2)格式：

選擇器1~選擇器2 {

    屬性：值;

}

 

3)注意點：

一、通用兄弟選擇器必須用~來連接

二、通用兄弟選擇器選中的是指選擇器後面的某個選擇器選中的全部標籤

不管有沒有被隔開，均可以被選中

3.2.2 示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        h1+p{
            font-size: 30px;
        }

        h1~p{
            color: red;
        }

    </style>

</head>
<body>
    <h1>我是標題1</h1>
    <a href="">有了這個標籤，p就再也不是緊跟h1標籤了，但通用兄弟選擇器仍能選中</a>
    <p>我是段落</p>
    <p>我是段落</p>
    <p>我是段落</p>
    <p>我是段落</p>
    <p>我是段落</p>
    <p>我是段落</p>
    <p>我是段落</p>
    <p>我是段落</p>
    <p>我是段落</p>
    <p>我是段落</p>
    <p>我是段落</p>
    <h1>我是標題2</h1>
    <p>我是段落</p>
</body>
</html>
View Code

第4章 交集選擇器與並集選擇器

4.1 做用

#一、做用：給全部選擇器選中的標籤中，相交的那部分標籤設置屬性

 

#二、格式：

    選擇器1選擇器2 {

        屬性：值;

    }

 

#三、注意：

一、選擇器與選擇器之間沒有任何連接符號

二、選擇器可使用標籤名稱、id、class

三、交集選擇器在企業開發中並很少見，瞭解便可

   由於：p.part1 徹底能夠用.part1取代

4.2 示例

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>後代選擇器</title>

 

    <style type="text/css">

        p.part1 {

            color: red;

        }

        p#p1{

            font-size: 100px;

        }

    </style>

</head>

<body>

    <p class="part1">我是段落</p>

    <p id="p1">我是段落</p>

    <p class="part1">我是段落</p>

    <p>我是段落</p>

    <p>我是段落</p>

    <p>我是段落</p>

 

</body>

</html>
View Code

 

4.3 並集選擇器

4.3.1 做用

1)做用：給全部知足條件的標籤設置屬性

 

2)格式：

    選擇器1,選擇器2 {

        屬性：值;

    }

 

3)注意：

一、選擇器與選擇器之間必須用逗號來連接

二、選擇器可使用標籤名稱、id、class

4.3.2 示例

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>後代選擇器</title>

 

    <style type="text/css">

        .part1,h1,a {

            color: red;

        }

    </style>

</head>

<body>

    <h1>哈哈啊</h1>

    <p class="part1">我是段落</p>

    <p id="p1">我是段落</p>

    <p class="part1">我是段落</p>

    <a href="#">我是我</a>

    <p>我是段落</p>

    <p>我是段落</p>

    <p>我是段落</p>

 

</body>

</html>
View Code

第5章 序列選擇器

5.1 做用

1)做用：

css3中新推出的選擇器中，最具表明性的的9個，又稱爲序列選擇器，過去的選擇器中要選中某個必須加id或class，學習了這9個後，不用加id或class，想選中同級別的第幾個就選第幾個

 

2)格式

#2.1 同級別

:first-child    p:first-child    同級別的第一個

:last-child    p:last-child    同級別的最後一個

:nth-child(n)                    同級別的第n個

:nth-last-child(n)            同級別的倒數第n個

 

#2.2 同級別同類型

:first-of-type                    同級別同類型的第一個

:last-of-type                    同級別同類型的最後一個

:nth-of-type(n)                    同級別同類型的第n個

:nth-last-of-type(n)            同級別同類型的倒數第n個

 

#2.3 其餘

:only-of-type                    同類型的惟一一個

:only-child                         同級別的惟一一個

5.2 同級別示例

#一、同級別的第一個

#1.1 示範一

p:first-child {

    color: red;

}

表明：同級別的第一個，而且第一個要求是一個p標籤

 

<p>我是段落1</p>

<p>我是段落2</p>

<p>我是段落3</p>

<p>我是段落4</p>

<p>我是段落5</p>

<div>

    <p>我是段落6</p>

</div>

 

這樣的話第一個p和div中的第一個p都變成紅色，

 

#1.2 示範二

p:first-child {

    color: red;

}

表明：同級別的第一個，而且第一個要求是一個p標籤

 

<h1>w我是標題</h1>

<p>我是段落1</p>

<p>我是段落2</p>

<p>我是段落3</p>

<p>我是段落4</p>

<p>我是段落5</p>

<div>

    <p>我是段落6</p>

</div>

 

這樣的話只有div中的第一個p變紅，由於在有在div內同一級別的第一個纔是p

 

注意點：

    :fist-child就是第一個孩子，不區分類型

 

#二、同級別的最後一個

p:last-child {

    color: red;

}

表明：同級別的最後一個，而且最後一個要求是一個p標籤

 

<h1>我是標題</h1>

<p>我是段落1</p>

<p>我是段落2</p>

<p>我是段落3</p>

<p>我是段落4</p>

<p>我是段落5</p>

<div>

    <p>我是段落6</p>

</div>

<p>我是段落7</p>

這樣的話只有6跟7都變紅

 

#三、同級別的第n個

p:nth-child(3) {

    color: red;

}

表明：同級別的第3個，而且第3個要求是一個p標籤

 

<h1>我是標題</h1>

<p>我是段落1</p>

<p>我是段落2</p>

<p>我是段落3</p>

<p>我是段落4</p>

<p>我是段落5</p>

<div>

    <p>我是段落6.1</p>

    <p>我是段落6.2</p>

    <h1>我是標題</h1>

</div>

<p>我是段落7</p>

這樣的話只有「我是段落2」變紅

 

#四、同級別的倒數第n個

p:nth-last-child(3) {

    color: red;

}

表明：同級別的倒數第3個，而且第3個要求是一個p標籤

<h1>我是標題</h1>

<p>我是段落1</p>

<p>我是段落2</p>

<p>我是段落3</p>

<p>我是段落4</p>

<p>我是段落5</p>

<div>

    <p>我是段落6.1</p>

    <p>我是段落6.2</p>

    <h1>我是標題</h1>

</div>

<p>我是段落7</p>

這樣的話只有「我是段落6.1」和「我是段落5」被選中

 

 

 

5.3 同級同類型

<h1>我是標題</h1>

<p>我是段落1</p>

<p>我是段落2</p>

<p>我是段落3</p>

<p>我是段落4</p>

<p>我是段落5</p>

<div>

    <p>我是段落6.1</p>

    <p>我是段落6.2</p>

    <h1>我是標題</h1>

</div>

<p>我是段落7</p>

#一、同級別同類型的第一個

p:first-of-type {

    color: red;

}

「我是段落1」和「我是段落6.1」被選中

 

#二、同級別同類型的最後一個

p:last-of-type {

    color: red;

}

「我是段落7」和「我是段落6.2」被選中

 

#三、同級別同類型的第n個

p:nth-of-type(2) {

    color: red;

}

「我是段落2」和「我是段落6.2」被選中

 

#四、同級別同類型的倒數第n個

p:nth-last-of-type(2) {

    color: red;

}

「我是段落5」和「我是段落6.1」被選中

 

 

 

第6章 屬性選擇器

6.1 做用

1)做用：根據指定的屬性名稱找到對應的標籤，而後設置屬性

       該選擇器，最經常使用於input標籤

 

2)格式與具體用法：

    [屬性名]

    其餘選擇器[屬性名]

    [屬性名=值]

    [屬性名^=值]

    [屬性名$=值]

    [屬性名*=值]

 

 

    例1：找到全部包含id屬性的標籤

        [id]

   

    例2：找到全部包含id屬性的p標籤

        p[id]

   

    例3：找到全部class屬性值爲part1的p標籤

        p[class="part1"]

   

    例4：找到全部href屬性值以https開頭的a標籤

        a[href^="https"]

       

    例5：找到全部src屬性值以png結果的img標籤

        img[src$="png"]

       

    例6：找到全部class屬性值中包含part2的標籤

        [class*="part"]

6.2 示例

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>後代選擇器</title>

 

    <style type="text/css">

        [id] {

            color: red;

        }

        p[id] {

            font-size: 30px;

        }

        p[class="part1"] {

            color: green;

        }

        a[href^="https"] {

            font-size: 50px;

        }

        img[src$="png"] {

            width: 100px;

        }

        [class*="part"] {

            text-decoration: line-through;

        }

 

    </style>

</head>

<body>

    <h1 id="id1">哈哈啊</h1>

    <p id="id2">我是段落</p>

    <p class="part1">我是段落</p>

    <p class="xxx part2 yyy">我是段落</p>

    <a href="#">我是我</a>

    <a href="http://www.baidu.com">http://www.baidu.com</a>

    <a href="https://www.baidu.com">https://www.baidu.com</a>

    <img src="1.png" alt="">

    <img src="2.jpg" alt="">

    <p>我是段落</p>

    <p>我是段落</p>

 

</body>

</html>
View Code

第7章 僞類選擇器

7.1 做用

1)、做用：經常使用的幾種僞類選擇器。

 

#1.1 沒有訪問的超連接a標籤樣式：

 

 

2) 注意：

a標籤的僞類選擇器能夠單獨出現，也能夠一塊兒出現

a標籤的僞類選擇器若是一塊兒出現，有嚴格的順序要求，不然失效

    link，visited，hover，active

hover是全部其餘標籤均可以使用的

focus只給input標籤使用

 

7.2 示例

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>後代選擇器</title>

    <style type="text/css">

        a:link {

            color: #cccccc;

        }

        a:visited {

            color: #55BBBB;

        }

        a:hover {

            color: green;

        }

        a:active {

            color: red;

        }

        input:hover {

            outline: none;

            background-color: #cccccc;

        } 

    </style>

</head>

<body>

<a href="https://www.baidu.com/a/b/c/d.html">點擊我</a>

<input type="text">

</body>

</html>

第8章 僞類元素選擇器

8.1 做用

)一、經常使用的僞元素。

#1.1 first-letter：雜誌類文章首字母樣式調整

例如：

p:first-letter {

  font-size: 48px;

}

 

#1.2 before

用於在元素的內容前面插入新內容。

例如：

p:before {

  content: "*";

  color: red;

}

在全部p標籤的內容前面加上一個紅色的*。

#1.3 after

用於在元素的內容後面插入新內容。

例如：

p:after {

  content: "?";

  color: red;

}

 

在全部p標籤的內容後面加上一個藍色的?。

8.2 示例

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>後代選擇器</title>

 

    <style type="text/css">

        p:first-letter {

            font-size: 50px;

        }

        /*兩個冒號與一個是同樣的，老版本用的是一個冒號，考慮到兼容性推薦使用一個冒號*/

        a::after {

            content: "?";

            color: red;

        }

        a:before {

            content: "-";

            color: green;

        }

 

    </style>

</head>

<body>

<p>英雄不問出處，流氓不論歲數</p>

<a href="#" class="help">老男孩是幹什麼的</a>

<a href="#" class="help">老男孩是幹什麼的</a>

<a href="#" class="help">老男孩是幹什麼的</a>

</body>

</html>
View Code

第9章 CSS三大特性

9.1 繼承性

1)定義：給某一個元素設置一些屬性，該元素的後代也可使用，這個咱們就稱之爲繼承性

 

2)注意：

    一、只有以color、font-、text-、line-開頭的屬性才能夠繼承

    二、a標籤的文字顏色和下劃線是不能繼承別人的

    三、h標籤的文字大小是不能繼承別人的，會變大，可是會在原來字體大小的基礎上變大

   

    ps:打開瀏覽器審查元素能夠看到一些inherited from。。。的屬性

3)應用場景：

一般基於繼承性統一設置網頁的文字顏色，字體，文字大小等樣式

9.1.1 繼承性示例:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>後代選擇器</title>

 

    <style type="text/css">

 

        div {

            color: red;

            font-size: 50px;

        }

 

 

    </style>

</head>

<body>

 

<div>

    <h1>我是標題</h1>

    <p><a href="#">偶的博愛</a></p>

    <ul>

        <li>導航1</li>

        <li>導航2</li>

        <li>導航2</li>

    </ul>

</div>

 

<div>

    <div>

        <p>aaaa</p>

    </div>

    <div>

        <p>bbbb</p>

    </div>

</div>

</body>

</html>
View Code

9.2 層疊性

1)定義：CSS全稱：Cascading StyleSheet層疊樣式表，層疊性指的就是CSS處理衝突的一種能力，即若是有多個選擇器選中了同一個標籤那麼會有覆蓋效果

 

#二、注意：

一、層疊性只有在多個選擇器選中了同一個標籤，而後設置了相同的屬性，

纔會發生層疊性

ps：經過谷歌瀏覽器能夠查看到，一些屬性被劃掉了

 

9.2.1 層疊性示例

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>後代選擇器</title>

 

    <style type="text/css">

 

        p {

            color: red;

        }

 

        .ppp {

            color: green;

        }

 

    </style>

</head>

<body>

<p class="ppp">我是段落</p>

</body>

</html>
View Code

9.3 優先級

1)定義：當多個選擇器選中同一個標籤，而且給同一個標籤設置相同的屬性時，如何層疊就由優先級來肯定

 

2)優先級

    總體優先級從高到底：行內樣式>嵌入樣式>外部樣式

 

    行內樣式並不推薦使用，因此咱們以嵌入爲例來介紹優先級

9.3.1 大前提：直接選中>間接選中(即繼承而來的)

#一、如下爲直接選中

    <style type="text/css">

        #id1 {

            color: red;

        }

 

        .ppp {

            color: green;

        }

 

        p {

            color: blue;

        }

    </style>
View Code

#二、如下爲間接選中

   <style type="text/css">

        ul {

            color: yellow;

        }

    </style>

 

 

    <ul>

        <li>

            <p id="id1" class="ppp">我是span</p>

        </li>

    </ul>
View Code

9.3.2 若是都是間接選中，那麼誰離目標標籤比較近，就聽誰的

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>後代選擇器</title>

 

    <style type="text/css">

        /*離目標近*/

        li {

            color: red;

        }

        /*離目標遠*/

        ul {

            color: yellow;

        }

 

    </style>

</head>

<body>

 

    <ul>

        <li>

            <p id="id1" class="ppp">我是span</p>

        </li>

    </ul>

</body>

</html>
View Code

9.3.3 若是都是直接選中，而且都是同類型的選擇器，那麼就是誰寫的在後面就聽誰的

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>後代選擇器</title>

 

    <style type="text/css">

        p {

            color: red;

        }

        /*一樣都是標籤選擇器，誰寫在後面誰生效*/

        p {

            color: yellow;

        }

 

    </style>

</head>

<body>

 

    <ul>

        <li>

            <p id="id1" class="ppp">我是span</p>

        </li>

    </ul>

</body>

</html>
View Code

9.3.4 若是都是直接選中，而且是不一樣類型的選擇器，那麼就會按照選擇器的優先級來層疊id > 類 > 標籤 > 通配符(也算直接選中) > 繼承 > 瀏覽器默認（即沒有設置任何屬性）

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>後代選擇器</title>

 

    <style type="text/css">

        /*打開瀏覽器依次去掉優先級高的來進行驗證*/

        #id1 {

            color: red;

        }

        .ppp {

            color: green;

        }

        p {

            color: blue;

        }

        * {

            color: yellow;

        }

        li {

            color: #7e1487;

        }

       

    </style>

</head>

<body>

 

    <ul>

        <li>

            <p id="id1" class="ppp">我是span</p>

        </li>

    </ul>

</body>

</html>
View Code

9.3.5 優先級之!important

#一、做用：還有一種不講道理的!import方式來強制指定的屬性的優先級提高爲最高，可是不推薦使用。由於大量使用!import的代碼是沒法維護的。

#二、注意：

    一、!important只能用於直接選中，不能用於間接選中

    二、!important只能用於提高被指定的屬性的優先級，其餘屬性的優先級不會被提高

三、!important必須寫在屬性值分號的前面

示例

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>後代選擇器</title>

 

    <style type="text/css">

        /*打開瀏覽器依次去掉優先級高的來進行驗證*/

        #id1 {

            color: red;

        }

        .ppp {

            color: green;

        }

        p {

            color: blue;

        }

        * {

            color: yellow !important;

        }

        li {

            color: #7e1487;

        }

 

    </style>

</head>

<body>

 

    <ul>

        <li>

            <p id="id1" class="ppp">我是span</p>

        </li>

    </ul>

</body>

</html>
View Code

9.3.6 優先級之權重計算

#一、強調

若是都是直接選中，而且混雜了一系列其餘的選擇器一塊兒使用時，則須要經過計算機權重來斷定優先級

 

#二、計算方式

#一、id數多的優先級高

#二、id數相同，則斷定類數多的優先級高

#三、id數、class數均相同，則斷定標籤數多的優先級高

#四、若id數、class數、標籤數均相同，則無需繼續往下計算了，誰寫在後面誰的優先級高

示例：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>後代選擇器</title>

 

    <style type="text/css">

        #id1 #id2 #id3 .ppp{

            color: red;

        }

        #id2 #id3.aaa p{

            color: purple;

        }

 

        #id1.ccc>.bbb>.aaa>p {

            color: pink;

        }

 

        #id1 .aaa .ppp {

            color: green;

        }

 

        #id2 .aaa p {

            color: yellow;

        }

 

        div ul li p {

            color: blue;

        }

 

        div ul p {

            color: cyan;

        }

 

    </style>

</head>

<body>

    <div id="id1" class="ccc">

        <ul id="id2" class="bbb">

            <li id="id3" class="aaa">

                <p class="ppp">我是段落</p>

            </li>

        </ul>

    </div>

</body>

</html>
View Code
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程