关于前端:CSS-类选择器和ID选择器

本节咱们来讲一下类选择器和 ID 选择器。

上一节咱们学习了标签选择器，然而在应用标签选择器的时候会有一个问题，举个例子，咱们先来看上面这段代码：

<!DOCTYPE>
<html>
    <head>
        <meta charset="utf-8">
        <title>CSS 学习 (9xkd.com)</title>
        <link rel="stylesheet" type="text/css" href="index.css">
    </head>
    <body>
        <h3> 动物园里有什么？</h3>
        <p> 小白兔 </p>
        <p> 小狮子 </p>
        <p> 小老虎 </p>
        <p> 小猴子 </p>
    </body>
</html>

在浏览器中的演示成果：

如果咱们想要将上述代码中“小兔子”字体款式设置为粉色加粗，其余内容不变，要怎么做？如果应用标签选择器 p 来设置款式，那上述代码中四个 <p> 标签中的内容款式都会跟着扭转呀，所以这时候用标签选择器显然不适合。

要解决这个问题，咱们就须要用到本节要学习的 CSS 中的类选择器和 ID 选择器啦。

类选择器用于形容一组标签的款式，一个类选择器能够在多个标签上应用。

语法：

.class_name{属性：属性值;}

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

示例：

例如上述代码中，咱们要给“小兔子”字体款式设置为粉色加粗，能够自定义一个类选择器：

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

而后在 HTML 标签上通过 class 属性来应用定义好的类款式，格局为：

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

如下所示：

<p class="rabbit"> 小白兔 </p>

在应用类款式的时候，只须要类款式名，不须要在后面加点。在浏览器中演示成果如下：

类选择器有一个益处就是，咱们能够在同一个页面中多个 HTML 标签上，应用同一个类选择器。

示例 p：

例如咱们除了能够在 <p> 标签上应用类选择器 rabbit，也能够在 <h3> 标签上应用：

<body>
    <h3 class="rabbit"> 动物园里有什么？</h3>
    <p class="rabbit"> 小白兔 </p>
    <p> 小狮子 </p>
    <p> 小老虎 </p>
    <p> 小猴子 </p>
</body>

在浏览器中演示成果：

ID 选择器和类选择器的应用根本差不多，然而还有一些不同的中央：

ID 选择器的是以井号 # 结尾来定义的。而类选择器是以点 . 来定义的。
ID 选择器在 HTML 中是能够通过 id 属性来应用。而类选择器是通过 class 属性来应用的。
同一个页面中一个 ID 选择器只能在中呈现一次，是惟一的。而类选择器能够在屡次呈现，所以 ID 选择器的针对性更强。

示例：

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

#only{background-color: pink;}

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

<!DOCTYPE>
<html>
    <head>
        <meta charset="utf-8">
        <title>CSS 学习 (9xkd.com)</title>
        <link rel="stylesheet" type="text/css" href="index.css">
    </head>
    <body>
        <h3 class="rabbit"> 动物园里有什么？</h3>
        <p class="rabbit"> 小白兔 </p>
        <p> 小狮子 </p>
        <p> 小老虎 </p>
        <p id="only"> 小猴子 </p>
    </body>
</html>

在浏览器中演示成果：

咱们能够在 HTML 标签中通过 id 属性来应用 CSS 中对应的 ID 选择器。在应用时，ID 选择器名称后面不须要带井号 #。

当咱们想要在 HTML 元素中设置 CSS 款式时，能够通过选择器来实现，最罕用的是三种根底选择器。当标签选择器不能满足咱们的需要时，咱们就能够应用类选择器和 ID 选择器。

记住在同一个页面中，不容许有雷同的 id 呈现，然而容许有雷同的 class。

链接：https://www.9xkd.com/

类选择器

示例：

示例 p：

ID 选择器

示例：

总结