本节我们来讲一下类选择器和ID选择器。
上一节我们学习了标签选择器，但是在使用标签选择器的时候会有一个问题，举个例子，我们先来看下面这段代码：
<!DOCTYPE html>
<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/
681
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
