CSS:基本选择器、层级选择器、选择器权重优先级

<!DOCTYPE html>
<html lang="en">
<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>选择器1：基本选择器</title>
</head>
<body>
    <h2>itme1</h2>
    <h2 title="hello">itme2</h2>
    <h2 id="a">item3</h2>
    <h2 id="a">item4</h2>
    <h2 class="b">item5</h2>
    <h2 class="b">item6</h2>
    <style>
        /* 基本选择器：根据元素自身特点来选择 */
        /* 1.标签选择器 */
        h2 {
            color: red;
        }
        /* 2.属性选择器 */
        h2[title="hello"] {
            color: green;
        }
        /* 3.id选择器，用于唯一元素，id唯一性由程序员控制，浏览器不检查 */
        h2[id="a"] {
            color: blue;
        }
        /* 4.class类选择器 ，用于多个元素*/
        h2[class="b"] {
            color: violet;
        }
        /* id ,class是高频属性 */
        h2#a,
        h2.b {
            /* color: orange; */
            background-color: yellow;
        }
        /* 层叠样式表，后面的覆盖前面的 */
        /* 通配符，选择下面所有的元素 */
        html body * {
            background-color: gray;
            /* background-color: gray !important; */
            /* !important;//提权到100%，优先级别最高 */
        }
        /* 上下文选择器 */
    </style>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<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>选择器2：层级选择器/上下文选择器</title>
</head>
<body>
    <!-- ul.list>li.item*8{itme$} -->
    <ul class="list">
        <li class="item">itme1</li>
        <li class="item second">itme2</li>
        <li class="item">
            itme3
            <!-- ul.inner>li*3{item3_$} -->
            <ul class="inner">
                <li>item3_1</li>
                <li>item3_2</li>
                <li>item3_3</li>
            </ul>
        </li>
        <li class="item">itme4</li>
        <li class="item">itme5</li>
        <li class="item">itme6</li>
        <li class="item">itme7</li>
        <li class="item">itme8</li>
    </ul>
    <style>
        /* 1.子元素 */
        .list>li {
            border: 1px solid #000;
        }
        /* 2.后代，选择所有的后代，不加>  空格即可 */
        .list li {
            border: 1px solid rgb(248, 26, 26);
        }
        /* 3.相邻关系，相邻兄弟+ */
        .item.second+* {
            background-color: gray;
        }
        /* 4.选择所有兄弟，后面的 */
        .item.second~* {
            background-color: rgb(223, 26, 26);
        }
    </style>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<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>3.选择器的权重/优先级（重点）</title>
</head>
<body>
    <h1 class="title" id="active">Hello</h1>
    <style>
        body h1.title#active {
            /* 1 1 2 */
            color: red;
        }
        body h1.title {
            /* 0 1 2 */
            color: greenyellow;
        }
        body h1 {
            /* 0 0 2 */
            /* body加上后，权重变为0 0 2 */
            color: darkorange;
        }
        h1 {
            /* 0 0 1 */
            color: green;
            /* 后面的覆盖前面的 ，如果要前面的生效，则要提权*/
        }
        /* 规则
        第一位：标签数量 个位
        第二位：class数量 十位
        第三位：id数量 百位 
        id不推荐使用，因为权重太高了，为了让代码具有弹性，尽量使用class
        为什么不使用最低权重的标签呢，因为标签数量太少了，而class可以任意命名。
        */
        /* h1 {
            color: violet !important;
        } */
        /* bootsrap ,element ui这些都不能改，因为升级会覆盖 */
    </style>
    <div class="col-md-3 vip">Bootstrap</div>
    <style>
        div.col-md-3.vip {
            border: 6px solid rgb(241, 14, 60);
        }
        div.col-md-3 {
            border: 1px solid #002;
        }
    </style>
</body>
</html>

相关文章