1、标签选择器 :选择一类标签
调用方式:标签{}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*标签选择器,会选择到 页面上所有的这个标签的元素*/
h1{
color: #4d3232;
background: #b3d4fc;
border-radius: 24px;
}
p{
font-size: 80px;
}
</style>
</head>
<body>
<h1>学Java</h1>
<h1>学Java</h1>
<p>一起学Java</p>
</body>
</html>
2、类选择器 class:选择所有class属性一致的标签,跨标签 .
调用方式:类名{}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*类选择的格式 .class的名称{}
好处,可以多个标签归类,是同一个class。可以复用
*/
.qinjiang{
color: red;
}
.kuangshen{
color:yellow;
}
</style>
</head>
<body>
<h1 class="qinjiang">标题1</h1>
<h1 class="kuangshen">标题2</h1>
<h1 class="qinjiang" 标题3</h1>
<p class="qinjiang">p标签</p>
</body>
</html>
3、id 选择器 :全局唯一,标签的id不能相同
调用方式:#id名{}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*id选择器 :id必须保证全局唯一!
#id名称{}
不遵循就近原则,固定的
id选择器>class 选择器 > 标签选择器
*/
#qinjiang{
color: darkgoldenrod;
}
.style1{
color: indianred;
}
h1{
color: #485cb7;
}
</style>
</head>
<body>
<h1 id="qinjiang" class="style1">标题1</h1>
<h1 class="style1">标题2</h1>
<h1 class="style1">标题3</h1>
<h1>标题4</h1>
<h1>标题5</h1>
</body>
</html>
三者的优先级:id > class > 标签
在三者同时出现在一段代码中, “id选择器” 的优先级高于 “class选择器” 高于“ 标签选择器”
萌新小白,仅供参考