CSS——三种基本选择器
选择器作用：选择页面上的某一个或者某一类元素
基本选择器
1.标签选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*标签选择器会选择到页面上所有的这个标签的元素*/
h1{
color: black;
background-color: green;
border-radius: 24px;
}
p{
font-size:100px;
color:black;
background-color: red;
border-radius: 24px;
}
</style>
</head>
<body>
<h1>数据库原理</h1>
<h1>计算机组成原理</h1>
<p>结构与算法</p>
</body>
</html>
2.类选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*类选择器的格式： .class的名称{}
好处：选择所有class属性一致的标签，多个标签可以是同一个class，class可以复用
*/
.anything{
color:red;
background-color: green;
border-radius: 24px;
}
.pengcheng{
color:green;
}
</style>
</head>
<body>
<h1 class="anything">标题1</h1>
<h1 class="pengcheng">标题2</h1>
<h1 class="anything">标题3</h1>
<p class="pengcheng">p段落标签</p>
</body>
</html>
3.id选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*id选择器的格式：#id的名称{}
id必须保证全局唯一，不能被复用
优先级（固定的）：id选择器>类选择器>标签选择器
*/
#anything{
color:red;
}
.any{
color:green;
}
h1{
color:blue;
}
</style>
</head>
<body>
<h1 id="anything">标题1</h1>
<h1 class="any">标题2</h1>
<h1 class="any">标题3</h1>
<h1>标题4</h1>
<h1>标题5</h1>
<h1>标题6</h1>
</body>
</html>
三种选择器的优先级（固定的）：id选择器>类选择器>标签选择器