css选择器

最新推荐文章于 2024-07-08 10:15:25 发布

凉风听雪

最新推荐文章于 2024-07-08 10:15:25 发布

阅读量170

点赞数

分类专栏：前端开发文章标签： css html 前端

本文链接：https://blog.csdn.net/p_s_p/article/details/126566793

版权

前端开发专栏收录该内容

29 篇文章 0 订阅

订阅专栏

1.后代选择器：

<!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>
        /* 后代选择器
            改变父选择器的后代选择器里面的属性
            格式：父选择器 儿选择器 {}
        */
        div p{
            color: red;
        }


    </style>
</head>
<p>普通p标签</p>
<body>
    <div>
        <p>
            div的儿子p标签
        </p>
    </div>
</body>
</html>

2.并集，交集选择器：

<!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>
        /* 并集选择器 */
        /* 所选选择器一样的 */
        /* 选择器1, 选择器2 {} */
        p,div,span,h1{
            color: red;
        }

        div,
        span{
            background-color: pink;
        }
        /* 交集选择器 */
        /* 同时满足选择器标签的 */
        /* 选择器1选择器2{} */
        h3.box{
            color: blue;
        }
    </style>
</head>

<body>
    <p>ppp</p>
    <div>divdiv</div>
    <span>spanspan</span>
    <h1>h1h1h1</h1>
    <h2>h2h2h2</h2>

    <h3>h3h3h3</h3>
    <h3 class="box">h3h3h3h3h3交集</h3>
</body>
</html>

3.hover伪类选择器：

<!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>
</head>
<style>
    /* hover伪类选择器 */
    /* 作用：选中鼠标悬停在元素上的状态，设置样式 */
    /* 语法：选择器：hover{} */
    p:hover{
        color: red;
    }
    a{
        text-decoration: none;
    }
    a:hover{
            color: yellow;
        }
</style>
<body>
    
    <p>鼠标碰到我就变红色</p>
    <a href="https://www.4399.com" target="_blank">点击去4399</a>
</body>
</html>

4.emmet语法：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            /* fw300快捷生成 */
            font-weight: 300;
            /* fsz快捷生成 */
            font-size: 20px;
            /*bgc生成 background-color */
            background-color: red;
        }
        p{
            /* 宽300 高200，背景色pink */
            /* w300+h200+bgc */
            width: 300px;
            height: 200px;
            background-color: #pink;
        }

    </style>
</head>
<body>
    <div class="box">.box回车默认div类</div>
    <p class="box">p.box回车</p>
    <div class="box">div.box回车</div>
    <p id="box">p#box回车</p>
    <p class="red" id="one">p.red#one回车连写</p>

    <!-- 生成同级div和p -->
    <div>div+p回车生成同级</div>
    <p></p>
    <!-- 生成父子级div和p -->
    <div>
        <p>div>p回车生成父子级</p>
    </div>
    <!-- p>div -->
    <p>
        <div>p>div也一样生成父子级</div>
    </p>
    <!-- 生成ul包括li -->
    <ul>
        <li>ul>li回车生成</li>
    </ul>
    <!-- ul>li{内容} -->
    <ul>
        <li>ul>li{}直接在后面大括号写内容回车</li>
    </ul>
    <!-- ul>li*3 -->
    <ul>
        <li>ul>li*3生成三个li标签</li>
        <li></li>
        <li></li>
    </ul>
    <!-- ul>li*3{} -->
    <ul>
        <li>直接写内容</li>
        <li>直接写内容</li>
        <li>直接写内容</li>
    </ul>
    <!-- ul>li{$}*3 -->
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>

</body>
</html>