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定义最后那个为准）