CSS三种基础选择器
本节我们来学习 CSS 中的选择器，选择器是 CSS ⾥⾯⼀个很重要的概念，HTML 中的所有标签样式，都是通过不同的 CSS 选择器进⾏控制的。我们只需要通过选择器，就可以对不同的 HTML 标签进⾏选择，并指定各种样式声明。
在 CSS 中三三种最基本的选择器，分别是标签选择器、类选择器（class）、ID选择器。
我们知道在 HTML 页⾯中引⼊ CSS 样式最好的⽅法是引⼊外部样式，也就是将 CSS 代码单独放置到⼀个 .css ⽂件内，然后再引⼊这个CSS ⽂件。
标签选择器
我们知道⼀个 HTML 页⾯是通过很多标签组成的，CSS 标签选择器就是⽤来声明这些标签的，因为每⼀个 HTML 标签的名称都可以作为相应的标签选择器的名称。
⽰例：
例如我们来看⼀个例⼦，下⾯是⼀段 HTML 代码：
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8">
<title>CSS学习(9xkd)</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;
}
记得在 HTML 中通过 <link> 标签来引⼊ CSS ⽂件，此时在浏览器中的演⽰效果如下所⽰：
从上述代码中，我们看到，CSS 语法就是由选择器和声明块 {} 组成，每个声明块中可以包含⼀个或多个样式声明，并且每条声明后⾯以分号 ; 结尾。
当然除了上述例⼦中的 p 、h3 标签可以作为标签选择器，其他的例如 html、body、a、img 等所有标签都是可以作为标签选择器的。
但是我们在使⽤标签选择器的时候会有⼀个问题，举个例⼦，我们先来看下⾯这段代码：
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8">
<title>CSS学习(9xkd)</title>
<link rel="stylesheet"type="text/css"href="index.css">
</head>
<body>
<h3>动物园⾥有什么？</h3>
css选择器分为哪几类<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> 标签上使⽤类选择器 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)</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。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。