Re: [問題] css選取器的問題

[birdhackor (夜殘狼)]

※ 引述《coldollsheep (加油加油^^)》之銘言：
: 貼程式碼
: ------------------------------------
: <style>

吃光光

:     <td>sdf</td>
:   </tr>
: </table>
: -------------------------
: 沒變就是沒變  幫個忙




問題是這樣的

個人先推薦你一些小技巧以及糾正你的習慣

首先

你的style請記得加type="text/css"

第二

推薦你使用firefox來偵錯

firefox有個套件叫做web developer

偵錯很好用

基本上

你用這個工具去瀏覽你的網頁的時候會發現

你去檢視那格td的樣式

會長這樣

.odd (line 16)

{

border-top-width: 15px;

吃光光

border-left-color-rtl-source: physical;

}

.test td (line 12)

{

border-top-width: 1px;

吃光光

height: 50px;

}


你有沒有發現一個問題

明明.test td (line 12)

比較前面

怎麼檢視樣式的時候跑到底下去了??(也就是被優先套用了)




其實這就是優先權的問題了

你可以試試看

改成這樣

 .odd{
   border:15px solid yellow !important;
 }

你會發現他的優先順序會變成第一

這樣就會套用了



那你會問

奇怪

我明明把odd放在後面阿

怎麼會優先權比較低呢??


其實是這樣的

大部分的人多半對優先權的順序不是那麼清楚

其實優先權有個很嚴謹的判斷順序

解說如下



CSS2.1用一個四位的數字串(CSS2用三位)來判斷CSS的優先權

行內樣式加 1,0,0,0。
每個ID選擇符(#id)加 0,1,0,0。
每個class選擇符(.class)、屬性選擇符(例([attr="])、每個偽類(例:hover)加 0,0,1,0
每個元素或偽元素(例:firstchild)等加 0,0,0,1
其他選擇符(例 全局選擇符 *、子選擇符 >)加0,0,0,0。
最後逐位相加數字串，得到最終的值，按照從左到右的順序逐位比較
!important 高於一切，如果 !important 聲明衝突，則比較優先權。
如果優先權一樣，則後寫者優先
由繼承而得到的樣式屬性不參與計算，低於一切其他規則

舉例

h1 {color: red;}
/* 一個普通元素0,0,0,1 */
body h1 {color: green;}
/* 兩個普通元素加成，結果是 0,0,0,2 */
/*0,0,0,1 小於 0,0,0,2 ，後者勝出*/

h2.grape {color: purple;}
/* 一個普通元素、一個class選擇符加成，結果是 0,0,1,1*/
h2 {color: silver;}
/*一個普通元素，結果是 0,0,0,1 */
/*0,0,1,1 大於 0,0,0,1 ，前者勝出*/



所以你的.odd是0,0,1,0
.test td則是0,0,1,1

後者優先

所以就算你把.odd寫後面也是一樣的


基本上

個人的習慣是直接在.odd前面加上body

這樣一來會超過他的優先權的就很少了

要把這整個都記起來一次次算實在很麻煩

所以有個大概的記法

使用!important之樣式→選取器較詳細的樣式→
後來才設定的樣式→未發生重覆設定的樣式



我多半都是等出問題再找

真的在編輯的時候很少直接去算優先權的




大概就是這樣

試試看吧

--
※ 發信站: 批踢踢實業坊(ptt.cc)
◆ From: 61.229.221.227
※ 編輯: birdhackor      來自: 61.229.221.227       (09/10 23:45)
推 terrylchen:推一下，好詳細的計算方式XD
推 JYHuang:好文~推一下
→ JYHuang:那請問有沒有方法能讓特定的元素不繼承呢？
推 aceone:專業 我覺得優先權應該是CSS裡最難的了
推 maplenote:推!好專業!!
推 coldollsheep:感謝大大 雖然我還不是完全了解～
→ coldollsheep:但是透過 !important 我的問題解決了 感恩
推 fet0124:推專業 學到了XD
※ 編輯: birdhackor      來自: 140.116.91.47        (10/30 10:31)