CSS核心（二）基本选择器 id 标签 class类选择器

人亦已歌 · 发表于 2023-1-31 15:56:48

选择器是用来选择标签的，它有很多种选择语法，本节先讲解几个基本的选择器，方便展开下面的课程。
原理如下：
例如页面中有这样一个标签：<div id="myid" class="box">盒子</div>

如果使用ID选择器方式选择该元素，语法如下：

#myid{
color:red;
}

复制代码

解释：

选择id为myid的标签，将该标签的字体颜色设置为red。

复制代码

如果使用标签选择器方式选择该元素，语法如下：

div{
color:red;
}

复制代码

解释：

选择标签名为div的标签，将文字颜色设置为red。

复制代码

如果使用class选择器选择该元素，语法如下：

.box{
color:red;
}

复制代码

解释：

选择类名为box的元素，将文字颜色设置为red。

复制代码

请注意：如果页面中存在相同的id、标签或类名，则会选中多个元素，{}中间写针对选中元素的css样式代码。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>基本选择器 id 标签 class类选择器</title>
</head>
<body>
<div id="myid">盒子</div>
<span>span标签</span>
<span>span标签</span>
<div class="box">我的标签</div>
<div class="box">我的标签</div>
</body>
<style>
        /* id选择器 */
        #myid{
                color:red;        
        }
        /* 标签选择器 */
        span{
                color:green;        
        }
        /* class类选择器 */
        .box{
                color:blue;        
        }
</style>
</html>