欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

簡介CSS中的各種選擇符

segmentfault   發(fā)布時間：2015-07-17 18:58:45   作者：suemi   我要評論
這篇文章主要介紹了CSS中的各種選擇符,是CSS入門學習中的基礎知識,需要的朋友可以參考下

類型，類和ID選擇器

    帶有空格的字體名稱要用''引起來
    對選擇器分組可使同一規(guī)則適用于多個選擇器，例子如下

CSS Code復制內容到剪貼板
  1. th,td {   
  2.     padding:0 10px 00;   
  3. }  

    選項的優(yōu)先級

CSS Code復制內容到剪貼板
  1. h1 {   
  2.     font-family:'Times New Roman',serif;   
  3. }   
  4. //先選用前者，沒有前者，再使用后者  

    類型名與類名中間不應有空格 div.btn-success
    通用選擇器*，適用于文檔所有元素

CSS Code復制內容到剪貼板
  1. * {   
  2.     font-family:Arial;   
  3. }  

    后代選擇器

CSS Code復制內容到剪貼板
  1. div.planet table td {   
  2.     padding:0 10px 0 0;   
  3. }   
  4. //是類為planet的div元素的后代table的后代的td樣式  

    萬萬牢記，上下文選擇符以空格作為分隔符，而分組選擇符則以逗號作為分隔符，不要弄混。
    子選擇符>

CSS Code復制內容到剪貼板
  1. section > p{   
  2.     font-style:Italic;   
  3. }   
  4. //section的子元素p  

    同胞選擇符～和+

section ~ p {
    font-style:Italic;
}
//p在section后面就行
section + p {font-style:Italic;}
//p必須緊跟section

    非子選擇符

CSS Code復制內容到剪貼板
  1. selection * a {   
  2.     ***;   
  3. }   
  4. //所有是selection元素孫子的a元素  

    ID選擇器

屬性選擇器

    標簽名[屬性="屬性值"]

CSS Code復制內容到剪貼板
  1. img[title="hh jj"]{...}  

偽類選擇器：動態(tài)事件，狀態(tài)改變

CSS Code復制內容到剪貼板
  1. a:visited {   
  2.     color:mangenta;   
  3. }  

  4. //被訪問過的鏈接

UI偽類
鏈接偽類

    Link。此時，鏈接就在那兒等著用戶點擊。
    Visited。用戶此前點擊過這個鏈接。
    Hover。鼠標指針正懸停在鏈接上。
    Active。鏈接正在被點擊（鼠標在元素上按下，還沒有釋放）。

focus偽類——鼠標放在上面

CSS Code復制內容到剪貼板
  1. input:focus {border:1px solid blue;}  

target偽類

CSS Code復制內容到剪貼板
  1. <a href="#more_info">More Information</a>     
  2. //位于頁面其他地方、ID 為 more_info 的那個元素就是目標。該元素可能是這樣的：   
  3.   
  4.   
  5. <h2 id="more_info">This is the information you are looking for.</h2>   
  6.   
  7.   
  8. //那么，如下 CSS 規(guī)則   
  9. #more_info:target {background:#eee;}  

結構化偽類

    first-child 一組同胞元素的第一個
    last-child
    nth-child(3) 一組同胞元素的第三個

偽元素——似有實無的元素

    first-letter
    first-line
    before 和 after

CSS Code復制內容到剪貼板
  1. p.age::before {content:"Age: ";}   
  2. p.age::after {content:" years.";}   
  3. //在類為age的p元素前面增加一段Age：    
  4. p::first-letter {font-size:300%;}   
  5. //放大p的第一個字母  

繼承和層疊

    瀏覽器默認樣式表
    用戶樣式表
    作者鏈接樣式表（按照它們鏈接到頁面的先后順序）
    作者嵌入樣式
    作者行內樣式

    越后面優(yōu)先級越高

    規(guī)則一：包含 ID 的選擇符勝過包含類的選擇符，包含類的選擇符勝過包含標簽名的選擇符。

    規(guī)則二：如果幾個不同來源都為同一個標簽的同一個屬性定義了樣式，行內樣式勝過嵌入樣式，嵌入樣式勝過鏈接樣式。在鏈接的樣式表中，具有相同特指度的樣式，后聲明的勝過先聲明的。

    規(guī)則一勝過規(guī)則二。換句話說，如果選擇符更明確（特指度更高），無論它在哪里，都會勝出。

    規(guī)則三：設定的樣式勝過繼承的樣式，此時不用考慮特指度（即顯式設定優(yōu)先）。下面簡單解釋一下規(guī)則三。比如下面的標記

Inheritance is weak in the Cascade

和下面的規(guī)則
div#cascade_demo p#inheritance_fact {color:blue;}
2 - 0 - 2（高特指度）
會導致單詞“weak”變成藍色，因為它從父元素 p 那里繼承了這個顏色值。
但是，只要我們再給 em 添加一條規(guī)則
em {color:red;}
0 - 0 - 1 （低特指度）
em 就會變成紅色。因為，雖然它的特指度低（0-0-1），但 em 繼承的顏色值，會被為它明確（顯式）指定的顏色值覆蓋，就算（隱式）遺傳該顏色值的規(guī)則的特指度高（2-0-2）也沒有用。

相關文章

  • CSS中的屬性選擇符和結構化偽類

    這篇文章主要介紹了CSS中的屬性選擇符和結構化偽類,是CSS入門學習中的基礎知識,需要的朋友可以參考下
    2015-08-01

  • 詳解CSS中的類和ID選擇符

    這篇文章主要介紹了CSS中的類和ID選擇符,是CSS入門學習中的基礎知識,需要的朋友可以參考下
    2015-08-01

  • CSS中的選擇符實際使用指南

    這篇文章主要介紹了CSS中的選擇符實際使用指南,是CSS入門學習中的基礎知識,需要的朋友可以參考下
    2015-07-28

  • 幾個特殊的CSS選擇符使用介紹

    這篇文章主要介紹了幾個特殊的CSS選擇符使用，在某些特殊情況下還是比較實用的，需要的朋友可以參考下
    2014-08-20

  • css選擇符類型詳細介紹

    這篇文章主要介紹了css選擇符類型詳細介紹，包括標簽選擇符、類選擇符、ID選擇符、包含選擇符、通配選擇符、選擇符分組、標簽指定式選擇符、組合選擇符,需要的朋友可以參考
    2014-04-16

  • CSS 選擇符的用法和實例

    成天都要與樣式打交道的朋友，相信對CSS選擇符(CSS Selectors)都不會陌生。不過對于剛接觸或者還不是很熟悉css的朋友來說，能夠找到一份對于CSS選擇符的相關例子集合，還是
    2009-12-08

  • 詳解如何編寫高效的 CSS 選擇符

    本篇文章主要介紹了詳解如何編寫高效的 CSS 選擇符，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2017-11-10

最新評論