CSS——三种基本选择器一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第6天，点击查看活动详情。 c

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第6天，点击查看活动详情。

css选择器：

要对哪一个标签里面的数据进行操作。哪一个标签就是选择器。

选择器分为基本选择器和扩展选择器。

基本选择器有三种：标签选择器、class选择器、id选择器。

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

基本选择器

1.标签选择器：使用标签名作为选择器的名称。

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

    <style>
        /*标签选择器会选择到页面上所有的这个标签的元素*/
        h1{
        color: black;
            background-color: green;
            border-radius: 24px;
        }
        p{
        font-size:100px;
        color:black;
        background-color: red;
        border-radius: 24px;
        }

    </style>

</head>
<body>

<h1>数据库原理</h1>
<h1>计算机组成原理</h1>

<p>结构与算法</p>
</body>
</html>

在这里插入图片描述

2.class选择器/类选择器：每个html标签都有一个属性class

类选择器是以一独立于文档元素的方式来指定样式，使用类选择器之前需要在html元素上定义类名，换句话说需要保证类名在html标记中存在，这样才能选择类。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*类选择器的格式： .class的名称{}
        好处：选择所有class属性一致的标签，多个标签可以是同一个class，class可以复用

        */
        .anything{
        color:red;
         background-color: green;
            border-radius: 24px;
        }
        .pengcheng{
        color:green;

        }


    </style>


</head>
<body>

<h1 class="anything">标题1</h1>
<h1 class="pengcheng">标题2</h1>
<h1 class="anything">标题3</h1>
<p class="pengcheng">p段落标签</p>

</body>
</html>

3.id选择器：每个html标签上面都有一个属性叫id

在使用ID选择器之前需要先在html文档中加注ID名称，这样在样式选择器中才能找到相对应的元素，ID选择器是一个页面中唯一的值。

注意：

一：一个文档中一个id选择器只充许使用一次，因为id在页面中是唯一的；

二，id选择器不能像类选择器一样多个合并使用，一个元素只能命名一个id名；

三，可以在不同的文档中使用相同的id名.

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

    <style>
         /*id选择器的格式：#id的名称{}
         id必须保证全局唯一，不能被复用
         优先级（固定的）：id选择器>类选择器>标签选择器
         */
         #anything{
                color:red;
         }
         .any{
         color:green;
         }
         h1{
         color:blue;
         }

    </style>

</head>
<body>

<h1 id="anything">标题1</h1>
<h1 class="any">标题2</h1>
<h1 class="any">标题3</h1>
<h1>标题4</h1>
<h1>标题5</h1>
<h1>标题6</h1>

</body>
</html>

三种选择器的优先级（固定的）：id选择器>类选择器>标签选择器