选择器（详细代码解释）

最新推荐文章于 2024-06-17 11:12:01 发布

△卡卡西

最新推荐文章于 2024-06-17 11:12:01 发布

阅读量245

点赞数 1

分类专栏：前端文章标签： html5 css3

本文链接：https://blog.csdn.net/xujx1997/article/details/120539719

版权

前端专栏收录该内容

29 篇文章 0 订阅

订阅专栏

具体代码展示，去除繁琐唠叨

层次选择器：（css样式中部分代码注释，可自行放开）

多选择器：

属性选择器：

元素选择器：

<style>
        div{
            background-color: rgb(17, 201, 115);
        }
        p{
            color: tomato;
            background-color: aqua;
        }
        li{
            border: 1px solid violet;
        }
    </style>
</head>
<body>
    <div>
        <p>1</p>
        <p>2</p>
        <p>3</p>
        <ul>
            <li>12</li>
            <li>34</li>
            <li>56</li>
        </ul>
    </div>
</body>

运行结果：

类选择器：

<style>
        .app{
            width: 80px;
            height: 160px;
            border: 1px coral solid;
            border-radius: 50%;
        }
        .one{
            background-color: rgb(236, 62, 97);
        }
        .two{
            background-color: cornflowerblue;
        }
        .three{
            background-color: deepskyblue;
        }
        .circle {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            /* 圆 */
        }
    </style>
</head>
<body>
    <div class="app">
            <!-- 定义两个class类 -->
        <div class="one circle">1</div>
        <div class="two circle">2</div>
        <div class="three circle">3</div>
    </div>
</body>

成果：

ID选择器：

<style>
    #app{
        height: 200px;
        background-color: burlywood;
    }
    .myDiv{
        color: darkslateblue;
    }
    #one{
        border: 10px solid rgb(212, 110, 14);
    }
</style>
<body>
    <div id="app">
        <div class="myDiv" id="one">1</div>
        <div class="myDiv" id="two">2</div>
        <div class="myDiv" id="three">3</div>

    </div>
</body>

成果展示：

普遍选择器：

<style>
    /* 全部背景颜色 */
    *{
        background-color: aquamarine;
    }
    /* id="app"的背景颜色 */
    #app>*{
        background-color: rgb(51, 148, 238);
    }
</style>
<body>
    <div>
        <div id="app">
            <div class="myDiv" id="one">1</div>
            <div class="myDiv" id="twe">2</div>
            <div class="myDiv" id="three">3</div>
            <div>4</div>
            <div>5</div>
            <div>6</div>
        </div>
    </div>
</body>

成果展示：

层次选择器：（css样式中部分代码注释，可自行放开）

<style>
    /* 全部背景颜色 */
    *{
        background-color: #7fffd4;
    }
    /* id="app"的背景颜色 */
    /* 后代 */
    /* #app p{
        background-color: rgb(17, 168, 12);
    } */
    /* 子代 */
    /* #app>p {
        background-color: rgb(241, 32, 241);
    } */
    /* 相邻同胞选择器 */
    /* .myP+p {
        background-color: rgb(241, 32, 32);
    } */
    /* 一般同胞选择器 */
    .myP~* {
        background-color: rgb(32, 81, 241);
    }
</style>
<body>
    <div>
        <div id="app">
            <div class="myDiv" id="one">1</div>
            <p>P1</p>
            <p>P2</p>
            <p>P3</p>
            <div class="myDiv" id="twe">2</div>
            <div class="myDiv" id="three">
                <p>P1-1</p>
                <p>P2-2</p>
                <p>P3-3</p>
            </div>
            <p class="myP">P4</p>
            <p class="myP">P5</p>
            <p class="myP">P6</p>

            <div>4</div>
            <div>5</div>
            <div>6</div>
        </div>
    </div>
</body>

成果展示：

多选择器：

<style>
    /* 组合选择器 */
    /* div,
    p,
    li,
    .myDiv,
    #app{
        color: hotpink;
    } */
    /* 嵌套选择器 */
    div.myDiv{
        color: lightseagreen;
    }

</style>
<body>
    <div>
        <div id="app">
            <div class="myDiv" id="one">1</div>
            <p>P1</p>
            <p>P2</p>
            <p>P3</p>
            <div class="myDiv" id="twe">2</div>
            <div class="myDiv" id="three">
                <p>P1-1</p>
                <p>P2-2</p>
                <p>P3-3</p>
            </div>
            <p class="myP">P4</p>
            <p class="myP">P5</p>
            <p class="myP">P6</p>

            <div>4</div>
            <div>5</div>
            <div>6</div>
        </div>
    </div>
</body>

成果展示：

属性选择器：

<style>
    /* 属性选择器 */
    [title*=i]{
        color: rgb(199, 10, 10);
    }
</style>
<body>
    <div>
        <div id="app">
            <div class="myDiv" id="one">1</div>
            <p>P1</p>
            <p>P2</p>
            <p>P3</p>
            <div title="div2myDiv" class="myDiv" id="twe">2</div>
            <div title="div3myDiv" class="myDiv" id="three">
                <p>P1-1</p>
                <p>P2-2</p>
                <p>P3-3</p>
            </div>
            <p class="myP">P4</p>
            <p class="myP">P5</p>
            <p class="myP">P6</p>

            <div>4</div>
            <div>5</div>
            <div>6</div>
        </div>
    </div>
</body>

成果展示：

△卡卡西

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
选择器（详细代码解释）

具体代码展示，去除繁琐唠叨元素选择器：<style> div{ background-color: rgb(17, 201, 115); } p{ color: tomato; background-color: aqua; } li{ border: 1px solid violet; }..
复制链接

扫一扫