CSS 優先順序為由上到下,若有相同則看權重。
/* 通用選擇,權重 0 */
* {
color: white;
}
/* 標籤元素選擇,權重 1 */
ul {
color: white;
}
/* class 選擇,權重 10 */
.main {
color: blue;
}
/* 屬性選擇,權重 10 */
[type='button'] {
color: red;
}
/* 狀態選擇,權重 10 */
a:hover {
color: grey;
}
/* id 選擇,權重 100 */
#main {
color: red;
}
/* inline style,權重 1000
* <div style="color: red;">
*/
/* !important,權重 10000 */
.pt-5 {
padding-top: 4rem !important ;
}
/* 相鄰選擇器,不包含自己,選取相鄰元素 */
li + li {
color:red;
}
/* 連號選擇器,不包含自己,選取同層指定的元素,會跳過未指定的元素 */
h2 ~ p {
color: red;
}
/* 選擇第一個子元素 */
ul > li {
color: red;
}
/* 後代選擇,ul 內所有 p 標籤 */
ul p {
color:blue;
}