CSS-常用选择器

最新推荐文章于 2024-02-04 09:46:40 发布

MondayCui

最新推荐文章于 2024-02-04 09:46:40 发布

阅读量154

点赞数

分类专栏：前端学习文章标签： css

本文链接：https://blog.csdn.net/MondayCui/article/details/108567000

版权

前端学习专栏收录该内容

42 篇文章 1 订阅

订阅专栏

元素选择器

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

    <style>
        /* 
            将所有的段落设置为红色（字体）

            元素选择器
                作用：根据标签名来选中指定的元素
                语法：标签名{}
                例子：p{}  h1{}  div{}
        */

        p{
            color:pink;
        }

        h1{
            color:rebeccapurple;
        }
    </style>
</head>
<body>
    <h1>0000000000</h1>
    <p>11111111111</p>
    <p>22222222222</p>
    <p>33333333333</p>
    <p>44444444444</p>
    <p>55555555555</p>
</body>
</html>

id选择器

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

    <style>
        /* 
            将22222222222设置红色


            id选择器
                作用：根据元素的id属性值选中一个元素
                语法：#id属性值{}
                例子：#box{} #red{} 
        */

        #red{
            color:red;
        }
    </style>
</head>
<body>
    <h1>0000000000</h1>
    <p>11111111111</p>
    <p id="red">22222222222</p>
    <p>33333333333</p>
    <p>44444444444</p>
    <p>55555555555</p>
</body>
</html>

类选择器

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

    <style>
        /* 
            将 2222... 和 3333...设置为蓝色
                
            类选择器
                作用：根据元素的class属性值选中一组元素
                语法：.class属性值
        */

        /* 
            class 是一个标签的属性，它和id类似，不同的是class可以重复使用
            可以通过class属性来为元素分组
            可以同时为一个元素指定多个class属性
        */

        .blue{
            color:blue;
        }
    </style>
</head>
<body>
    <h1>0000000000</h1>
    <p>11111111111</p>
    <p class="blue">22222222222</p>
    <p class="blue">33333333333</p>
    <p>44444444444</p>
    <p>55555555555</p>
</body>
</html>

通配选择器

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

    <style>
        /* 
           通配选择器
                作用：选中页面中的所有元素
                语法: *
        */

        *{
            color:red;
        }
    </style>
</head>
<body>
    <h1>0000000000</h1>
    <p>11111111111</p>
    <p class="blue">22222222222</p>
    <p class="blue">33333333333</p>
    <p>44444444444</p>
    <p>55555555555</p>
</body>
</html>

MondayCui

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS-常用选择器

元素选择器<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>常用选择器</title> <style> /* 将所有的段落设置为红色（字体）元素选择器作用：根据标签名来选中指定的元素
复制链接

扫一扫