1.一个DIV中既有class又有id
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style type="text/css">
#box1{color:red;}
.box1{color:blue;}
.box2{color:blue;}
#box2{color:red;}
</style>
</head>
<body>
<div class="box1" id="box1">
Hello
</div>
<div class="box2" id="box2">
Word
</div>
<!--说明id作用力大于class，且与位置无关-->
</body>
</html>
2.一个div中有多个class
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style type="text/css">
.red {color:red;}
.blue{color:blue;}
</style>
</head>
<body>
<div class="red blue" >
Hello
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style type="text/css">
.blue{color:blue;}
.red {color:red;}
</style>
</head>
<body>
<div class="red blue" >
Hello
</div>
</body>
<!--结果是：第一个是蓝色，第二个是红色。
说明：有两个类，会按照div引用的class中，在css中最后一个定义为准-->
</html>
3.伪类选择器与class
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style type="text/css">
/*下边执行顺序不影响结果*/
.red {color:red;}
.red>div:first-child{color:pink;}/*作用域第1*/
.red>div{color:blue;}/*作用域第2*/
.green {color:green;}/*作用域第3*/
</style>
</head>
<body>
<div class="red" >
<div class="green">
Hello<!--颜色为pink-->
</div>
</div>
</body>
</html>
总结一下：作用力排名
第一名：ID
第二名：伪类选择器（里边还有比较）
第三名：class（多个class，以css定义最后那个为准）
时间： 2024-10-09 05:42:01