一:选择器分类
选择器分为基础选择器和复合选择器两个大类,我们这里先讲解一下基础选择器。
基础选择器是由单个选择器组成的
基础选择器又包括:标签选择器、类选择器、id选择器和通配符选择器
二.(1)标签选择器
标签选择器(元素选择器)是指用 HTML 标签名称作为选择器,按标签名称分类,为页面中某一类标签指定统一的CSS样式。
语法:
标签名{
属性1:属性值1;
属性2:属性值2;
属性3:属性值3;
...
}
代码示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>基础选择器之标签选择器</title>
<style>
/* 标签选择器 :写上标签名 */
p {
color: green;
}
div {
color: pink;
}
</style>
</head>
<body>
<p>男生</p>
<p>男生</p>
<p>男生</p>
<div>女生</div>
<div>女生</div>
<div>女生</div>
</body>
</html>
运行结果:
作用
标签选择器可以把某一类标签全部选择出来,比如所有的<div>
标签和所有的<span>
标签。
优点
能快速为页面中同类型的标签统一设置样式。
缺点
不能设计差异化样式,只能选择全部的当前标签。
二.(2)类选择器
如果想要差异化选择不同的标签,单独选一个或者某几个标签,可以使用类选择器.
类选择器在 HTML 中以 class 属性表示,在 CSS 中,类选择器以一个点"."号显示。
语法
.类名 {
属性1: 属性值1;
...
}
例如,将所有拥有red类的HTML元素均为红色。
.red {
color: red;
}
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta