CSS学习日记3-选择器1-基本选择器-类/id选择器_id选择器属于基本选择器-CSDN博客

本文链接：https://blog.csdn.net/qq_24681419/article/details/107768162

二.各种选择器
（一）基本选择器
1.标签选择器
2.类选择器
可以在相应的标签上定义一个类，单独修饰这个类。使用class字段，在CSS中要用点开头

<body>
    <div class="divone">
  第一个div
    </div>
    <div class="divtwo">
第二个div
    </div>
</body>

    <style>
        .divone{
            background-color: blue;
        }
        .divtwo{
            background-color: red;
        }
        

    </style>

在这里插入图片描述
.
3.id选择器
id是标签的唯一标识。在CSS用#开头选择。
多个id相同时，我们发现样式也是可以显示的。但建议不要使用多个相同的id来写样式。因为id在js中也需要使用，有可能会有冲突。

    <style>
        .divone{
            background-color: blue;
        }
        .divtwo{
            background-color: red;
        }
        #divthree{
            color: green;
        }
        #divfour{
            color: yellow;
        }
    </style>

<body>
  第一个div
    </div>
    <div class="divtwo">
第二个div
    </div>
    <div id="divthree">
        第三个div
          </div>
          <div id="divfour">
      第四个div
          </div>
</body>

在这里插入图片描述

注：class可以同时召唤多个

多个类用空格隔开就好，比如

<body>
          <p class="p18">我的字体是18</p>
          <p class="p18 p-red">我不仅是18，还是红色的</p>
</body>

    <style>
        .p18 {
            font-size: 18px;
        }
        .p-red {
            color: red;
        }
    </style>

在这里插入图片描述