影響RWD的權重概念


Posted by hoyi-23 on 2021-05-12

如何判斷權重高低

先比權重,再比先後順序,後蓋前

!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寫樣式 !!!!

原因:

  1. ID選擇器很難被覆蓋! (若HTML1標籤1分/CSS類別選擇器10分/ID是100分)
  2. ID的用途是用來做錨點,快速指向位置。
  3. JS運用

Element 寫在標籤內

它的權重也很高,比ID高。
使用時機:

  1. Banner
  2. 輪播效果(例如,因img有較多限制,無法使用img的情況下,會使用style=background:url();
  3. JS運用

!important 最高權重

小心使用

如何覆蓋前人的CSS

  1. !important (很絕的做法)
  2. 開一個新的CSS,code使用一模一樣的選擇器,放在前人的後面。(權重一樣,比順序)
    <head>
    <link rel="stylesheet" href="css/前人的code.css">
    <link rel="stylesheet" href="css/新開的code.css">
    </head>
    

#RWD #css #權重







Related Posts

最會翻譯的webpack

最會翻譯的webpack

VS Code配置紀錄

VS Code配置紀錄

leetcode-Remove Duplicates from an Array (ES6)

leetcode-Remove Duplicates from an Array (ES6)


Comments