如何判斷權重高低
先比權重，再比先後順序，後蓋前
!important > element(style) > id > css > html標籤
HTML 標籤 V.S CSS 類別選擇器
HTML 標籤 1分
CSS 類別選擇器 10分
<style>
.title{color:red;} //10分
.title{color:blue;} //10分
h1{color:pink;} //1分
</style>
<body>
<h1 class="title"> 你好</h1>
</body>
// 這時會出現"藍色"的你好
<style>
.container h1{color:red;} //11分
.title{color:blue;} //10分
h1{color:pink;} //1分
</style>
<body>
<div class="container">
<h1 class="title"> 你好</h1>
</div>
</body>
// 這時會出現"紅色"的你好
<style>
.title1{color:red;} //10分
.title2{color:blue;} //10分
</style>
<body>
<h1 class="title1 title2"> 你好</h1>
</body>
// 這時會出現"藍色"的你好
不看html標籤上class的順序，是看css排放的順序
<style>
.title1{color:red;} //10分
.title2{color:blue;} //10分
</style>
<body>
<h1 class="title2 title1"> 你好</h1>
</body>
// 這時會出現"藍色"的你好
補充: 標籤綁定問題
建議不要有下面的寫法:
<style>
h1.title{coloe:red;} //將class綁死標籤上，讓class無法好好運用
</style>
不要用ID寫樣式 !!!!
原因:
- ID選擇器很難被覆蓋! (若HTML1標籤1分/CSS類別選擇器10分/ID是100分)
- ID的用途是用來做錨點，快速指向位置。
- JS運用
Element 寫在標籤內
它的權重也很高，比ID高。
使用時機:
- Banner
- 輪播效果(例如，因img有較多限制，無法使用img的情況下，會使用style=background:url();
- JS運用
!important 最高權重
小心使用
如何覆蓋前人的CSS
- !important (很絕的做法)
- 開一個新的CSS，code使用一模一樣的選擇器，放在前人的後面。(權重一樣，比順序)
<head> <link rel="stylesheet" href="css/前人的code.css"> <link rel="stylesheet" href="css/新開的code.css"> </head>
