标签选择器
格式 :标签{}
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>三种基本选择器</title>
<!--标签选择器-->
<style>
h1{
color: green;
}
</style>
</head>
<body>
<h1>标题1</h1>
<h1>标题2</h1>
<h1>标题3</h1>
</body>
</html>
特点
- 作用域为全局同类标签
- 无法针对同类标签中个别标签区别处理
类选择器
格式:.类名{}
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>类选择器</title>
<style>
.t{
color: red;
}
</style>
</head>
<body>
<h1 class="t">标题1</h1>
<h1 class="t2">标题2</h1>
<h1>标题3</h1>
<h2 class="t">标题4</h2>
</body>
</html>
特点
- 作用域为全局同类名标签
- 可将标签分类化区别处理
id选择器
格式:#id名{}
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>id选择器</title>
<style>
#t3{
color: yellow;
}
</style>
</head>
<body>
<h1 class="t">标题1</h1>
<h1 class="t2">标题2</h1>
<h1 id="t3">标题3</h1>
<h2 class="t">标题4</h2>
</body>
</html>
特点
- id名具有全局唯一性
- 仅对同id名标签生效
三种基本标签优先级
id选择器 > 类选择器 > 标签选择器