CSS的三种基础选择器
2020-12-26 本文已影响0人
前小小
CSS中三种最基本的选择器：
- 标签选择器
- 类选择器
- ID选择器
标签选择器
一个 HTML 页面是通过很多标签组成的，CSS 标签选择器就是用来声明这些标签的，因为每一个 HTML 标签的名称都可以作为相应的标签选择器的名称。
示例：
下面是一段html代码：
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8">
<title>CSS学习</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;
}
CSS 语法就是由选择器和声明块 {}组成，每个声明块中可以包含一个或多个样式声明，并且每条声明后面以分号 ; 结尾。
除了上述例子中的 p、h3 标签可以作为标签选择器，其他的例如html、body、a、img等标签都是可以作为标签选择器的。
类选择器
类选择器用于描述一组标签的样式，一个类选择器可以在多个标签上使用。
语法：
.class_name{
属性：属性值;
}
类选择器前面必须有一个点 .，这个点必不可少，是类选择器的标志。类选择器的名称 class_name 是自定义的，选择器中的属性和属性值跟标签选择器中一样。
示例：
html代码：
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8">
<title>CSS学习</title>
<link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
<h3>动物园</h3>
<p class="rabbit">小白兔</p>
<p>小狮子</p>
<p>小老虎</p>
<p>小猴子</p>
</body>
</html>
要给“小兔子” 字体样式设置为粉色加粗，可以自定义一个类选择器：
.rabbit{
color: pink;
font-weight: bold;
}
然后在 HTML 标签上通过 class 属性来使用定义好的类样式，格式为：
<标签名 class="类名称">标签内容</标签名>
类选择器有一个好处就是，我们可以在同一个页面中多个 HTML 标签上，使用同一个类选择器。
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学习</title>
<link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
<h3>动物园</h3>
<p class="rabbit">小白兔</p>
<p>小狮子</p>
<p>小老虎</p>
<p id="only">小猴子</p>
</body>
</html>
加入前端学习裙：953352883，我们一起学前端，还有学习资料免费分享；
