032.三种基本选择器（优先级：id选择器class选择器标签选择
器）
1.标签选择器：选择⼀类标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>2021-11-19</title>
<style type="text/css">
/*标签选择器会选择到也⾯上的所有标签*/
h1 {
color: #0000FF;
background: #7CFC00;
/*边框圆⾓*/cssclass属性
border-radius: 24px;
}
p{
/*字体⼤⼩*/
font-size: 100px;
}
</style>
</head>
<body>
/*标签选择器的弊端：如果只想让第⼀个h1变⾊，第⼆个不变⾊，标签选择器是做不到的*/
<h1>学JAVA</h1>
<h1>学JAVA</h1>
<p>学CSS</p>
</body>
</html>
2.类选择器 class：选择所有class属性⼀致的标签，跨标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>2021-11-19</title>
</head>
<style type="text/css">
/*类选择器的格式：.class的名称｛｝
1.好初：可以多个标签归类，是同⼀个class，可以复⽤
*/
.first{
color: #0000FF;
}
.second{
color: #7CFC00;
}
.third{
color: #ED4358;
}
</style>
<body>
<h1 class="first">A</h1>
<h1 class="second">B</h1>
<h1 class="third">C</h1>
<h1 class="first">D</h1>
</body>
</html>
3.Id选择器：全局唯⼀
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>2021-11-19</title>
</head>
<style type="text/css">
/*ID选择器的⼀个格式  #id名称｛｝  id必须保证全局唯⼀
1.不遵循就近原则，固定的，id选择器 > class选择器 > 标签选择器        */
#first{
color: #0000FF;
}
.second{
color: #FFFFFF;
}
h1{
color: #6C6C6C;
}
</style>
<body>
<h1 id="first">A</h1>
<h1 class="second">B</h1>
<h1 id="third">C</h1>
<h1 id="five">D</h1>
</body>
</html>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。