CSS 类选择器和ID选择器

原创
09/24 11:19
阅读数 59

本节我们来讲一下类选择器和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 选择器的是以井号 # 开头来定义的。而类选择器是以点 . 来定义的。
  • 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/

展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
OSCHINA
登录后可查看更多优质内容
返回顶部
顶部