前端基础笔记——常用选择器

最新推荐文章于 2022-04-23 16:35:40 发布

恬一

最新推荐文章于 2022-04-23 16:35:40 发布

阅读量112

点赞数

分类专栏：李立超前端学习

本文链接：https://blog.csdn.net/weixin_44158539/article/details/107821704

版权

前端学习同时被 2 个专栏收录

39 篇文章 0 订阅

订阅专栏

李立超

32 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>常用选择器</title>
    <style>
        /*
          将所有的段落设置为红色（字体）
          元素选择器
                -作用：根据标签名来选中指定的元素
                -语法：标签名{}
                -eg：p{}  h1{}   div{}

                   
        */
        p{
            color:red;
        }
        /*
          id选择器：
                 -作用：将元素的id属性值选中一个元素
                 -语法：#id属性值{}
                 -eg:#box{}     #red{}
          将第三行元素字体变为黄色
        */
        #red{
             color:blue;
        }
        /*
           类选择器
               -作用：根据元素的class属性值选中一组元素
               -语法：
                      .class{}
               -class是一个标签的属性，它和id类似，不同的是class可以重复使用
               -可以通过class属性为元素进行分组
               -可以同时为一个类指定多个class属性

          将第四行、第五行设为紫色 
         
        */
        .z{
            color:blue
            font-size:100px;

        }
        /*
          通配选择器
                作用：选中页面中所有的元素
                语法：*
        */
        *{
            color:green;
        }
        /*
           样式的选择器有实现的优先级顺序问题
        */
    </style>
</head>
<body>
    <p>学习，好好学习！</p>
    <p>学习，好好学习！</p>
    <p id="red">学习，好好学习！</p>
    <p class="z"></p>学习，好好学习！</p>
    <p class="z">学习，好好学习！</p>
    <p class="z">学习，好好学习！</p>
    <p>学习，好好学习！</p>
</body>
</html>