子選擇器 在CSS樣式表中, 有時候我們需要為一個選擇器進行再次的選擇, 比如要為某段落標簽下的<span>標簽進行樣式設定(<span>標簽必須為段落標簽下的第一代子元素, 意思即中間不包含別的標簽嵌套), 這個時候就要使用子選擇器. 代碼示例: p>span{ font-size:20px; }
子選擇器
在CSS樣式表中, 有時候我們需要為一個選擇器進行再次的選擇, 比如要為某段落標簽下的<span>標簽進行樣式設定(<span>標簽必須為段落標簽下的第一代子元素, 意思即中間不包含別的標簽嵌套), 這個時候就要使用子選擇器.
代碼示例:
p>span{
font-size:20px;
}
" > "就稱之為子選擇器, 它的作用就是將標簽選擇器下的第一代子元素的<span>標簽中的文本樣式設置為字型大小20px, 但是這種顯然不是很靈活, 只能選擇子一代的標簽元素, 如果我需要選擇多代子標簽, 就需要很麻煩的依次修改.
包含選擇器
明白了子選擇器, 包含選擇器也就好理解了, 它用於選擇指定標簽元素下的後輩元素, 可以越級指定, 而不是非要直接後代元素.
兩種選擇器具體使用視情況而定, 並不是包含選擇器更加方便就全部使用, 就如同程式開發中使用更多的常量會是程式更加健壯, 選擇器也是這樣, 選擇合適的時機選擇不同的選擇器.
分組選擇符
假如有一個樣式, 你想同時給多個標簽, 你可以給他們修改相同的類, id, 但是這樣非常笨重, 而且ID選擇器只可以設置一次, 所以這時候需要使用分組選擇符, 通過符號" , "(沒有雙引號), 可以讓多個選擇器同時使用相同的樣式.
代碼示例
p, span{
font-size:20px;
}
偽類選擇符
這個如果說用的非常多是這樣, 說用的非常少, 也不為過, 主要是瀏覽器相容性是個很大的問題, 萬惡的IE((╯‵□′)╯︵┻━┻), 所以給大家簡單介紹一個比較常用的, 也是你每天打開網頁都會遇到的, 也不用擔心瀏覽器相容性的樣式.
a:hover{
color:red;
}
這句話通過上面的學習應該很好理解, 也就是<a>標簽, 修改顏色, 而hover的意思就是, 當滑鼠滑過的時候, a:hover屬於標簽的某種狀態, 所以稱之為偽類選擇符.
有個叫通用選擇器的東西, 這個我沒仔細說, 就是選擇器部分什麼也不寫, 用一個*代替, 它會預設選擇所有的標簽, 實際作用並不是很大.
css的幾個特性
繼承
這個繼承可不是面向對象中的封裝繼承多態的繼承, 在我理解應該是標簽及其子標簽的共性, 在面向對象語言中子類會完全繼承父類的開放介面和成員變數, 而在HTML中是對父類標簽做樣式修改後, 一部分規則會傳遞給子標簽(並不是所有的規則都可以的). 比如color等屬性. 更加詳細的規則, 大家就自行百度啦, 畢竟學習也是一個在探尋的過程, 常見的可以繼承的屬性比如字型大小, 顏色等文字類屬性, 不可繼承的比如加邊框等.
權值
這個不需要大家理解, 雖然有較為詳細的數值, 但是其實也就是個優先順序的問題, 簡單來說就是標簽選擇器 < 類選擇器 < ID選擇器(權值的大小也是如此), 也就是說ID選擇器的優先順序最高, 當設置規則是是可以通過選擇器覆蓋的, 但是這個要在同等類型的css樣式表裡, 也就是說內聯式就和內聯式比, 外部式就和外部式比. 繼承的權值非常低, 也就不過多介紹了.
重要性
有的時候, 我們需要為一個屬性設置為最高權值, 保證在後面也不會被修改, 這個時候在屬性後面寫上!important即可. 這樣的屬性就會是最高權值, 也就是最高優先順序.
代碼示例:
架設標簽<p class = "wang">
樣式表代碼
p{
color:red!important;
}
p.class{
color:green;
}
雖然代碼中css樣式表中後來修改的顏色為綠色, 而且p.class是類選擇器, 權值高於p標簽選擇器, 但是因為color屬性已經被設置為最高權值了, 那麼顏色還會是紅色, 如果為後面的color:green;也加上!important, 那麼顏色會變為綠色, 因為權值是附和相加原則的, 所以實際效果要先看權值, 再看層疊覆蓋(也就是最後的css樣式表), 如果權值相同才看層疊覆蓋.
