CSS中的类选择器和ID选择器介绍

时间 2021-05-22

标签 css html 浏览器学习字体 spa code htm utf-8 rem 栏目 CSS 繁體版

原文原文链接

咱们先来看下面这段代码：css

<!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>

在浏览器中的演示效果：
html

若是咱们想要将上述代码中 “小兔子” 字体样式设置为粉色加粗，其余内容不变，要怎么作？若是使用标签选择器 p 来设置样式，那上述代码中四个 <p> 标签中的内容样式都会跟着改变呀，因此这时候用标签选择器显然不合适。浏览器

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

类选择器

类选择器用于描述一组标签的样式，一个类选择器能够在多个标签上使用。字体

语法：spa

.class_name{
    属性：属性值;
}

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

示例：

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

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

而后在 HTML 标签上经过 class 属性来使用定义好的类样式，格式为：utf-8

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

以下所示：rem

<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 选择器的是以井号 # 开头来定义的。而类选择器是以点 . 来定义的。
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选择器名称前面不须要带井号#。

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