初级选择器

最新推荐文章于 2024-02-27 16:51:47 发布

原创最新推荐文章于 2024-02-27 16:51:47 发布 · 91 阅读

CC 4.0 BY-SA版权

文章标签：

1.标签名选择器以标签命名的选择器
2. class类名选择器以 .为开头进行选择的类名选择器
3. id选择器以#号进行选择
4. 通配符选择器选择所有的标签名以*{}开头的
5. 后代选器以空格隔开后代可以给儿子也可以给儿子的儿子加样式
6. 6. 子级选择器以>进行选择的
7. 选择器的优先级: !important > 行内样式 > id选择器 > class类 > 标签名选择器 > 通配符> (继承)

初级选择器

<!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>Document</title>
    <style>
        /* 标签名选择器 选择所有叫p标签 */
        /* p{
            color: red;
        } */

        .one{
            color: red;
        }

        /*class类名选择器 以 .为开头进行选择的 类名选择器 */
        .three{
            color: aqua;
        }

        .third{
            color: blue;
            background-color: orange;
        }

        /* 类名选择器 */
    </style>
</head>
<body>
    <!-- p{我是第$个}*3 -->
    <p class="one ">我是第1个</p>
    <p class="two">我是第2个</p>
    <p class="three third">我是第3个</p>
    <p class="three">我是第4个</p>

    <h3 class="three">我是三级标题</h3>
</body>
</html>

<!-- 
    用户需求:
        每一个p标签的颜色都是不同的 不能使用行内元素


 -->

id选择器

<!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>Document</title>
    <style>
        /* id选择器 以#号进行选择 */
        #text1{
            color: orange;
        }
        #text2{
            color: purple;
        }
    </style>
</head>
<body>
    <span id="text1">我是第1个span</span>
    <br>
    <hr>
    <span id="text2">我是第2个span</span>
</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>Document</title>
    <style>
        /* 配配符标签  选择所有的标签名 */
        *{
            color: red;
        }


        /* 找到ul的后代 叫Li的标签 父子 */
        ul li{
            color: orange;
        }

        /* 爷 父(儿) 子(孙) */
        /* ul li span{
            color: pink;
        } */

        /* 后代选择器  */
        li span{
            color: green;
        }
    </style>
</head>
<body>
    <p>1</p>
    <span>哈哈哈哈</span>
    <b>我是个帅哥</b>

    <ul>
        <li>我是ul的子标签 <span>我是span</span></li>
    </ul>
</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>优先级</title>
    <style>
        /* 通配符标签选择器 */
        *{
            color: brown !important;
        }
        /* 类名选择器 */
        .wrap{
            color: green;
        }
        /* id选择器 */
        #box{
            color: hotpink;
        }

        /* 标签名 */
        p{
            color: blue;
        }

        ul{
            color: skyblue;
        }
    </style>
</head>
<body>
    <div class="warp" id="box" style="color: aqua;">我是盒子标签</div>

    <ul>
        <li>儿子标签</li>
    </ul>
</body>
</html>