首頁 > 博客列表 > 實(shí)例演示四種上下文選擇器的使用場(chǎng)景

博主信息

博文 6

粉絲 0

評(píng)論 0

訪問量 3594

專題推薦

更多>

相關(guān)推薦

熱門教程

更多>

相關(guān)教程

實(shí)例演示四種上下文選擇器的四種使用場(chǎng)景

1.父[]子選擇器>

程序

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>實(shí)例演示上下文選擇器的四種使用場(chǎng)景</title>
</head>
<body>
    <ul class="list">
        <li class="item">item1</li>
        <li class="item">item2</li>
        <li class="item">item3</li>
        <li class="item">item4</li>
        <li class="item">item5</li>
        <li class="item">item6</li>
    </ul>
    <style>
        .list > .item {
            border: 1px solid #000;
        }
    </style>
</body>
</html>

web顯示

2.后代選擇器空格

程序

    <ul class="list">
        <ul class="list">
            <li class="item">item1</li>
            <li class="item">item2</li>
            <li class="item">
                item3
                <ul>
                    <li class="item">item3-1</li>
                    <li class="item">item3-2</li>
                    <li class="item">item3-3</li>
                    <li class="item">item3-4</li>
                    <li class="item">item3-5</li>
                </ul>
            </li>
            <li class="item">item4</li>
            <li class="item">item5</li>
            <li class="item">item6</li>
        </ul>
    </ul>
    <style>
        .list   .item {
            border: 1px solid #000;
        }
    </style>
</body>
</html>

web頁面

3.兄弟+

程序:

<li class="item four">item4</li>
            <li class="item">item5</li>
            <li class="item">item6</li>
        </ul>
    </ul>
    <style>
        .list > .item.four +.item{
            background-color: blueviolet ;
        }
    </style>
</body>
</html>

或

</li>
            <li class="item four">item4</li>
            <li class="item">item5</li>
            <li class="item">item6</li>
        </ul>
    </ul>
    <style>
        .list > .item.four + *{
            background-color: blueviolet ;
        }
    </style>
</body>
</html>

web頁面

4同級(jí)的所有~

<body>
    <ul class="list">
        <ul class="list">
            <li class="item">item1</li>
            <li class="item">item2</li>
            <li class="item three">item3</li>
            <li class="item ">item4</li>
            <li class="item">item5</li>
            <li class="item">item6</li>
        </ul>
    </ul>
    <style>
        .list > .item.three ~ *{
            background-color: blueviolet ;
        }
    </style>
</body>
</html>

程序:

批改老師：

PHPz

批改狀態(tài)：合格

老師批語：

本博文版權(quán)歸博主所有，轉(zhuǎn)載請(qǐng)注明地址！如有侵權(quán)、違法，請(qǐng)聯(lián)系admin@php.cn舉報(bào)處理！

全部評(píng)論文明上網(wǎng)理性發(fā)言，請(qǐng)遵守新聞評(píng)論服務(wù)協(xié)議

0條評(píng)論

作者最新博文

要交作業(yè)了

2023-03-10 19:55:01

亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

實(shí)例演示四種上下文選擇器的四種使用場(chǎng)景