0
点赞
收藏
分享

微信扫一扫

032.三种基本选择器 (优先级:id选择器 > class选择器 > 标签选择器)

李雨喵 2022-07-15 阅读 154

1.标签选择器:选择一类标签

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>2021-11-19</title>
<style type="text/css">
/*标签选择器会选择到也面上的所有标签*/
h1 {
color: #0000FF;
background: #7CFC00;
/*边框圆角*/
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>

 



举报

相关推荐

选择器之类选择器

0 条评论