python全栈笔记-前端2.03_高级选择器

最新推荐文章于 2024-09-14 13:16:58 发布

猪油糖

最新推荐文章于 2024-09-14 13:16:58 发布

阅读量95

点赞数

分类专栏： notes

本文链接：https://blog.csdn.net/weixin_37267713/article/details/82530422

版权

notes 专栏收录该内容

26 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>高级选择器</title>

    <style type="text/css">
        /*群组选择器*/
        .title,.content,.footer{
            width:968px;
            margin:0 auto;
            background-color:#BFBFBF;
            border:1px solid red;
        }

        /*交集选择器*/
        p.p1{
            color:#0DC87A;
        }
        p#title1{
            font-size:30px;
        }

        /*紧跟着h3标题的标签*/
        h3+p{
            color:#D23180;
        }

        /*兄弟选择器*/
        h3~p{
            color:#4558C9;
        }

        /*找到所有class=baidu的选择器*/
        [class="baidu"]{
            color:#25CB33
        }

        /*!*找到所有class开头是btn的选择器*!*/
        /*[class^="btn"]{*/
            /*font-size: 20px;*/
            /*color: #37C8B0;*/
        /*}*/

        /*找到所有class结尾是btn的选择器*/
        [class$="ault"]{
            font-size: 20px;
            color: #37C8B0;
        }

        /*总结：
        基础选择器：
        1.标签选择器 div
        2.类选择器 .div1
        3.id选择器  #box
        4.通配符选择器 *

        高级选择器：
        1.群组选择器  中间是用，
        2.交集选择器  选择器之间不能又空格，第一个标签必须是标签选择器，第二个标签可以是id选择器或类选择器
        3.后代选择器  选择器之间用空格
        4.子代选择器  >
        5.毗邻选择器  +
        6.兄弟选择器  ~
        7.属性选择器  [class="值"][class^="开头的值"][class$="结尾的值"]
        */




    </style>
</head>
<body>

    <div class="title">
        <p class="p1" id="title1">我是一个标题</p>
    </div>

    <div class="content">
        <h3>我是3级标题</h3>
        <a href="">百度一下</a>
        <p>我是另一个标题</p>
        <h3>我是3级标题</h3>
        <p>我是另一个标题</p>
        <h3>我是3级标题</h3>
        <p>我是另一个标题</p>
        <p>我是另一个标题</p>
        <p>我是另一个标题</p>
        <p>我是另一个标题</p>
    </div>

    <div class="footer">

        <a href="" class="baidu">百度</a>
        <a href="" class="btn-default">百度一下</a>
        <a href="" class="baidu">百度</a>

    </div>


</body>
</html>