CSS的三种基础选择器

ゞ浴缸里的玫瑰 2022-12-30 13:58 141阅读 0赞

**CSS中三种最基本的选择器：**

*  标签选择器
 *  类选择器
 *  ID选择器

#### 标签选择器 ####

一个 HTML 页面是通过很多标签组成的，CSS 标签选择器就是用来声明这些标签的，因为每一个 HTML 标签的名称都可以作为相应的标签选择器的名称。

示例：

下面是一段html代码：

<!DOCTYPE>
    <html>
        <head>
            <meta charset="utf-8">
            <title>CSS学习</title>
            <link rel="stylesheet" type="text/css" href="index.css">
        </head>
        <body>
            <h3>学习</h3>
            <p>我爱学习，学习使我快乐。</p>
        </body>
    </html>

如果我们要为这两个标签定义 CSS 样式，就可以直接在 .css 文件内通过标签选择器来声明样式：

h3{
        color: red ;
    }
    p{
        color: green;
    }

CSS 语法就是由**选择器**和\*\*声明块 \{\}\*\*组成，每个声明块中可以包含一个或多个样式声明，并且每条声明后面以分号 **;** 结尾。

除了上述例子中的 `p`、`h3` 标签可以作为标签选择器，其他的例如`html`、`body`、`a`、`img`等标签都是可以作为标签选择器的。

#### 类选择器 ####

类选择器用于描述一组标签的样式，一个类选择器可以在多个标签上使用。  
语法：

.class_name{
    
        属性：属性值;
    }

类选择器前面必须有一个点 .，这个点必不可少，是类选择器的标志。类选择器的名称 class\_name 是自定义的，选择器中的属性和属性值跟标签选择器中一样。

示例：  
html代码：

<!DOCTYPE>
    <html>
        <head>
            <meta charset="utf-8">
            <title>CSS学习</title>
            <link rel="stylesheet" type="text/css" href="index.css">
        </head>
        <body>
            <h3>动物园</h3>
            <p class="rabbit">小白兔</p>
            <p>小狮子</p>
            <p>小老虎</p>
            <p>小猴子</p>
        </body>
    </html>

要给“小兔子” 字体样式设置为粉色加粗，可以自定义一个类选择器：

.rabbit{
        color: pink;
        font-weight: bold;
    }

然后在 HTML 标签上通过 class 属性来使用定义好的类样式，格式为：

<标签名 class="类名称">标签内容</标签名>

类选择器有一个好处就是，我们**可以在同一个页面中多个 HTML 标签上，使用同一个类选择器**。

#### ID选择器 ####

*  ID 选择器的是以井号`#`开头来定义的。而类选择器是以点`.`来定义的。
 *  ID 选择器在 HTML 中是可以通过`id`属性来使用。而类选择器是通过`class`属性来使用的。
 *  同一个页面中一个ID选择器只能在中出现一次，是唯一的。而类选择器可以在多次出现，所以ID选择器的针对性更强。

示例：

通过`#`来定义一个ID选择器，设置背景颜色为粉色的样式：

#only{
        background-color: pink;
    }

然后在 HTML 中通过 id 属性使用这个ID选择器：

> 加入前端学习裙：953352883，我们一起学前端，还有学习资料免费分享；