选择器用来选择页面中的标签,方便设置我们需要的样式,比较简单的选择器有以下四类
1. 标签选择器
标签 选择器可以通过标签名找到页面中所有的同类的标签,去设置样式。
写法:标签名{css 属性名:属性值;}
比如我们选中了 p 标签,那么页面中所有的 p 标签都会设置同样的样式,而不是单独某一个,不管嵌套关系有多复杂,都能找到对应的 p 标签。
HTML
<!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>Document</title>
<style>
p {
font-size: 25px;
color: red;
}
</style>
</head>
<body>
<div>
<p>基础</p>
<div>
<p>基础选择</p>
<div>
<span>
<h3>选择器</h3>
</span>
<ul>
<li>
<p>选择</p>
</li>
</ul>
</div>
</div>
</div>
</body>
</html>
2. 类选择器
几乎所有标签上都会有 class 属性,其属性值就是类名。类名也遵循命名规范,可以由数字、字母、下划线、中划线组成,但不能是数字或中划线开头。
一个标签可以同时有多个类名,类名间用空格隔开即可。
类选择器 是通过类名找到页面中所有带有这个类名的标签,然后设置样式,类名是可以重复的,一个类选择器可以同时选中多个标签。
写法:.类名{css 属性名:属性值;}
HTML
<!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>Document</title>
<style>
.font {
border: 2px solid #000;
font-size: 25px;
}
.choose {
color: red;
}
</style>
</head>
<body>
<div>
<div>
<p class="font">基础选择</p>
<div>
<span>
<h3 class="font choose">选择器</h3>
</span>
<ul>
<li class="choose">
<p>选择</p>
</li>
</ul>
</div>
</div>
</div>
</body>
</html>
3. id 选择器
顾名思义,id 选择器 就是通过id找到页面中带有这个 id 属性值的标签,设置样式。但一个标签上只能有一个 id 属性值,一个 Id 选择器也只能选中一个标签( id 属性值在一个页面是唯一的 ),就类似于我们的身份证号码,不可重复。
写法:#id名{css 属性名:属性值;}
id 选择器通常配合 js 使用。
HTML
<!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>Document</title>
<style>
#font {
color: red;
font-size: 25px;
font-weight: bold;
}
</style>
</head>
<body>
<div>
<p id="font">基础选择</p>
<div>标签</div>
</div>
</body>
</html>
4. 通配符选择器
写法:*{css 属性名:属性值;}
通配符标签,给页面中所有的标签设置样式,一般会用于去除标签默认的外边距、内边距。在开发中很少使用,只有在特殊情况下才会用到。
HTML
<!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>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div>
<p>基础选择器</p>
<div>标签</div>
<div>通配符选择器</div>
</div>
</body>
</html>
5. 类选择器与 id 选择器的区别
- 类名相当于姓名,可以重复,即一个标签可以同时有多个类名
- id 属性值相当于身份证号码,是唯一的,即一个标签只能有一个 id 属性值
- 类选择器以 . 开头,id 选择器以 # 开头
实际开发中,类选择器使用的会比较多,id 一般会配合 js 使用,非必要不要使用 id 选择器设置样式。
实际开发中也可以将一些公共代码放到公共的类中,这样可以减少代码冗余。