CSS3-基本选择器

Rella_w

已于 2022-02-02 19:13:04 修改

阅读量158

点赞数

文章标签： css3 前端 css

于 2022-02-02 19:12:02 首次发布

本文链接：https://blog.csdn.net/Wjiahui/article/details/122771240

版权

2、选择器

作用：选择页面上的某一个或者某一类元素

2.1、基本选择器
1、标签选择器 :选择一类标签标签{}
2、类选择器 class ：选择所有class属性一致的标签，跨标签 .类名{}
3、Id选择器：全局唯一！ #id{}
优先级：id>class>标签选择器

1、标签选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*标签选择器会选择到页面上所有的这个标签的元素*/
        h1{
            color: #267fc4;
            background: wheat;
            border-radius: 30px;
        }
        p{
            font-size:80px
        }
    </style>

</head>
<body>

<h1>学java</h1>
<h1>学前端</h1>
<p>看王嘉尔</p>

</body>
</html>

请添加图片描述
弊端：标签选择器只能选择所有的标签，不能只选择一个

2、类选择器 class

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        /*类选择器的格式   .class的名称{}
        好处:可以多个标签归类，是同一个class,不同的标签可以复用一个class
        */
        .jiaer{
            color: rgba(38, 127, 196, 0.84);
        }
        .jiahjui{
            color: #758943;
        }
    </style>


</head>
<body>

<h1 class="jiaer">标题1</h1>
<h1 class="jiahjui">标题2</h1>
<h1 class="jiaer">标题3</h1>

<p class="jiahjui">标题4</p>

</body>
</html>

在这里插入图片描述

3、Id选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        /* id选择器:   id必须保证全局唯一！
           #id名称{}
           优先级：
           不遵循就近原则，固定的
           id选择器>class选择器>标签选择器
        */
        #jiaer{
            color: #c49726;
        }
        .style1{
            color: #267fc4;
        }
        h1{
            color: red;
        }
    </style>

</head>
<body>

<h1 id="jiaer" class="style1">标题1</h1>
<h1 class="style1">标题2</h1>
<h1 class="style1">标题3</h1>
<h1>标题4</h1>

</body>
</html>