组合选择器

m0_47146894

已于 2022-10-14 09:56:04 修改

阅读量114

点赞数

分类专栏： Java前端HTML 文章标签： java

于 2022-09-07 11:46:50 首次发布

本文链接：https://blog.csdn.net/m0_47146894/article/details/126742651

版权

Java前端HTML 专栏收录该内容

26 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>组合选择器</title>
    <style type="text/css">
        /*后代选择器（以空格号分隔） */
        .cla li {
            background-color: #e878ea;
        }
        /*子代选择器（以大于号分隔）*/
        ul>li{
            background-color: blue;
        }
        /*相邻兄弟选择器（以加号分隔）*/
        li+li{
            background-color: yellow;
        }
        /*普通兄弟选择器（以波浪号分隔）*/
        ul~ul{
            background-color: brown;
        }
    </style>
</head>
<!--
    组合选择器
        后代选择器（以空格号分隔）
            选择指定元素的所有后代元素
            指定元素 指定元素{
                属性名:属性值;
                ......
            }
        子代选择器（以大于号分隔）
            选择指定元素的第一代元素
        相邻兄弟选择器（以加号分隔）
            选择指定元素的相邻的下一个同级指定元素（只会向下找一个）
        普通兄弟选择器（以波浪号分隔）
            选择指定元素侯的指定同级元素（只会向下找）

        优先级
            后代>子代>相邻>普通
-->
<body>
    <h2>食物</h2>
    <ul>
        <li>水果
            <ul class="cla">
                <li>苹果酱</li>
                <li>瑾子</li>
                <li>巴拉了</li>
            </ul>
            <div>搞快点</div>
        </li>
        <li>肉
            <ul>
                <li>鹿肉</li>
                <li>牛肉</li>
                <li>喜羊羊肉</li>
            </ul>
        </li>
    </ul>
    <ul>
        <li>哈哈哈</li>
        <li>嘿嘿嘿</li>
    </ul>
</body>
</html>