css中樣式的優先順序簡單總結
阿新 • • 發佈:2018-11-10
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .div3{ width: 200px; height: 200px; border: 1px solid red; } .content .div1 .div2 .div3{ background-color: blue; } .div1 .div2 .div3{ background-color: yellow; } .content .div1.div3{ background-color: brown; } .content .div2 .div3{ background-color: #ccc; /*下面的顏色會把上面的顏色給覆蓋掉*/ } .div2 .div3{ background-color: red; } .div3{ background-color: green; } </style> </head> <body> <div> <div> <div> <div></div> </div> </div> </div> </body> </html>
上面的程式碼最終div3顯示的顏色是blue藍色
總結:
最終作用的元素之前的父級元素寫的越多(也就是寫寫樣式時,層級寫的越深),優先順序越高,
相同個數的父級,優先順序一樣,但是寫在後面的樣式會把前面的樣式給覆蓋掉
相同的樣式,優先順序高的優先
不同的樣式,進行疊加
相同的優先順序,後面的會覆蓋前面的樣式