Correction status:Uncorrected
Teacher's comments:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css选择器优先级</title> <style type="text/css"> h1 { background-color: green; color: red; font-size: 10px; } h2{ background-color: green; color: red; font-size: 10px; } h3{ background-color: green; color: red; font-size: 10px; } .h1-style{ background-color: yellow; color:blue; font-size: 15px; } #h1{ background-color: red; color:lightgreen; font-size: 20px;} #h2{ background-color: red; color:lightgreen; font-size: 20px; } #h3{ background-color: red; color:lightgreen; font-size: 20px; } </style> </head> <body> <h1>这里是标签h1</h1> <h2>这里是标签h2</h2> <h3>这里是标签h3</h3> <h1 id="h1" class="h1-style" style="background-color: #00ff11; color: #fffb21;font-size: larger"> 这里是标签h1、id、class、style进行优先级比较,内联style第一</h1> <h2 id="h2" class="h1-style" >这里是 标签h3、id、class优先级比较 ,id第二</h2> <h3 class="h1-style">这里是 标签h3、class优先级比较,class第三,标签优先级排名最后</h3> <p>最后比较结果是style > id > class > 标签h1</p> </body> </html>
点击 "运行实例" 按钮查看在线实例