在css樣式表中, 有時候我們需要為乙個選擇器進行再次的選擇, 比如要為某段落標籤下的標籤進行樣式設定(標籤必須為段落標籤下的第一代子元素, 意思即中間不包含別的標籤巢狀), 這個時候就要使用子選擇器.
**示例:
p>span{
font-size:20px;
" > "就稱之為子選擇器, 它的作用就是將標籤選擇器下的第一代子元素的標籤中的文字樣式設定為字型大小20px, 但是這種顯然不是很靈活, 只能選擇子一代的標籤元素, 如果我需要選擇多代子標籤, 就需要很麻煩的依次修改.
明白了子選擇器, 包含選擇器也就好理解了, 它用於選擇指定標籤元素下的後輩元素, 可以越級指定, 而不是非要直接後代元素.
兩種選擇器具體使用視情況而定, 並不是包含選擇器更加方便就全部使用, 就如同程式開發中使用更多的常量會是程式更加健壯, 選擇器也是這樣, 選擇合適的時機選擇不同的選擇器.
假如有乙個樣式, 你想同時給多個標籤, 你可以給他們修改相同的類, id, 但是這樣非常笨重, 而且id選擇器只可以設定一次, 所以這時候需要使用分組選擇符, 通過符號" , "(沒有雙引號), 可以讓多個選擇器同時使用相同的樣式.
**示例
p, span{
font-size:20px;
這個如果說用的非常多是這樣, 說用的非常少, 也不為過, 主要是瀏覽器相容性是個很大的問題, 萬惡的ie((╯‵□′)╯︵┻━┻), 所以給大家簡單介紹乙個比較常用的, 也是你每天開啟網頁都會遇到的, 也不用擔心瀏覽器相容性的樣式.
a:hover{
color:red;
這句話通過上面的學習應該很好理解, 也就是標籤, 修改顏色, 而hover的意思就是, 當滑鼠滑過的時候, a:hover屬於標籤的某種狀態, 所以稱之為偽類選擇符.
有個叫通用選擇器的東西, 這個我沒仔細說, 就是選擇器部分什麼也不寫, 用乙個*代替, 它會預設選擇所有的標籤, 實際作用並不是很大.
這個不需要大家理解, 雖然有較為詳細的數值, 但是其實也就是個優先順序的問題, 簡單來說就是標籤選擇器 < 類選擇器 < id選擇器(權值的大小也是如此), 也就是說id選擇器的優先順序最高, 當設定規則是是可以通過選擇器覆蓋的, 但是這個要在同等型別的css樣式表裡, 也就是說內聯式就和內聯式比, 外部式就和外部式比. 繼承的權值非常低, 也就不過多介紹了.
有的時候, 我們需要為乙個屬性設定為最高權值, 保證在後面也不會被修改, 這個時候在屬性後面寫上!important即可. 這樣的屬性就會是最高權值, 也就是最高優先順序.
**示例:
架設標籤
樣式表**
p{color:red!important;
p.class{
color:green;
雖然**中css樣式表中後來修改的顏色為綠色, 而且p.class是類選擇器, 權值高於p標籤選擇器, 但是因為color屬性已經被設定為最高權值了, 那麼顏色還會是紅色, 如果為後面的color:green;也加上!important, 那麼顏色會變為綠色, 因為權值是附和相加原則的, 所以實際效果要先看權值, 再看層疊覆蓋(也就是最後的css樣式表), 如果權值相同才看層疊覆蓋.
HTML css樣式選擇器
style簡介 這篇介紹style，style有三種方式 1 在head中加style標籤，在標籤中寫css樣式 2 在body的標籤中新增style屬性，在屬性中增加css樣式 3 在link標籤中引入寫好的css樣式表 一 在head中新增style標籤 1 id選擇器 在乙個html頁面中，不...
初學HTML CSS常用選擇器
選擇器 瀏覽器通過選擇器為滿足條件的html元素新增css樣式 id選擇器 瀏覽器為 id標籤屬性的屬性值與 id選擇器名相同的標籤元素新增 css樣式 語法中使用的是 對應的id值 類選擇器 瀏覽器為 class標籤屬性的屬性值與 類選擇器名相同的標籤元素新增 css樣式，語法中使用的是 對應的c...
HTML CSS 偽類選擇器
這個也有意思 之前幾天學的，現在寫寫剛好複習 偽類是什麼？偽類用於定義元素的特殊狀態，比如滑鼠懸浮在按鈕上，按鈕顏色會變就是乙個例子。鏈結偽類選擇器 修改鏈結狀態的選擇器 注意 a hover必須在 css 定義中的a link和a visited之後，才能生效！a active必須在 css 定義...