3.基本选择器
①标签选择器
html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="css/style01.css">
</head>
<body>
<h1>标题1</h1>
<h1>标题2</h1>
<p>Yu</p>
</body>
</html>
css:
/*标签选择器，会选择该页面上所有的这个标签的元素*/
h1{
color: #53c48b;
}
p{
font-size: 45px;
}
运行结果：
②类选择器
html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="css/style02.css">
</head>
<body>
<h1 class="BT1">标题1</h1>
<h1 class="BT2">标题2</h1>
<h1 class="BT1">标题3</h1>
</body>
</html>
css:
/*类选择器
格式：.class的名称{}
特点：同一个class,可以复用
*/
.BT1{
color: #53c48b;
}
.BT2{
color: aqua;
}
运行结果：
③id选择器
html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="css/style03.css">
</head>
<body>
<h1 id="BT1">标题1</h1>
<h1 id="BT2">标题2</h1>
</body>
</html>
<!--优先级
id>类>标签
-->
css:
/*id选择器
格式：#id名称{}
特点：id必须保证全局唯一
*/
#BT1{
color: #53c48b;
}
#BT2{
color: red;
}
运行结果：
①
②
③
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
