css3 選擇器記

css3 選擇器

  根據所獲取頁面中元素的不一樣,把css3選擇器分爲五大類:css

  1. 基本選擇器
  2. 層次選擇器
  3. 僞類選擇器
    1. 動態僞類選擇器
    2. 目標僞類選擇器
    3. 語言僞類選擇器
    4. UI元素狀態僞類選擇器
    5. 結構僞類選擇器
    6. 否認僞類選擇器
  4. 僞元素
  5. 屬性選擇器

基本選擇器

  基本選擇器是CSS中使用最頻繁,最基礎,也是CSS中最先定義的選擇器。經過基本選擇器能夠肯定HTML樹形結構中大多素DOM元素節點。html

通配選擇器

  通配選擇器(*)用來選擇全部元素,固然也能夠選擇某個元素下的全部元素。css3

*{
    margin:0;
    padding:0;
}

  表示全部元素的內外邊距都爲0。web

元素選擇器

  元素選擇器(E)是CSS選擇器中最多見,最基本的選擇器。文檔的元素包括html,body,p,div等。瀏覽器

div{
    background:blue;
}

  表示全部div元素背景色是藍色。字體

ID選擇器

  在使用ID選擇器以前,須要在HTML文檔中給對應的元素設置id屬性並設置值,才能找到對應的元素。ID選擇器具備惟一性,在一個頁面中不能同時出現id相同的屬性值。在CSS樣式中使用id選擇器時,須要在id屬性值的前面加上「#」號,如(#id)。網站

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
    <title></title>
<style>
    #yxz{
        width:100px;
        height:100px;
        background:red;
    }
</style>
</head>
<body>
    <div id="yxz">我有id</div>
    <div>呵呵</div>
</body>
</html>

  表示具備id屬性值爲「yxz」的元素寬高爲100px,紅色背景。ui

類選擇器

  類選擇器(.class)是以獨立於文檔元素的方式來指定元素樣式。使用方法與ID選擇器相似,首先在HTML給須要的元素定義class屬性,併爲其設置屬性值。但與ID選擇器不一樣的是,類選擇器在一個頁面中能夠有多個相同的類名,而ID選擇器的ID名在整個頁面中只能有一個在CSS樣式中使用類選擇器時,須要在屬性值的前面加上點號(.),如(.class)。編碼

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
    <title></title>
<style>
    .yxz{
        width:100px;
        height:100px;
        background:red;
    }
</style>
</head>
<body>
    <div class="yxz">我有類名</div>
    <div>呵呵</div>
</body>
</html>

  表示具備class屬性值爲「yxz」的元素寬高爲100px,紅色背景。spa

  類選擇器還有一種使用方法,就是多類選擇器。經過兩個或兩個以上類選擇器合併,來定義有別於一個類名的元素效果。

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
    <title></title>
<style>
    .yxz{
        width:100px;
        height:100px;
        background:red;
    }
    .yxz.sx{
        border:1px solid black;
    }
</style>
</head>
<body>
<div class="yxz sx">我有兩個類名</div>
<div class="yxz">呵呵</div>
</body>
</html>

  具備類名「yxz」的兩個div寬高背景都同樣,可是第一個div還有另外一個類名「sx」,經過這個類名爲第一個div增長了邊框屬性。這樣咱們就能夠爲多個屬性設置通常樣式與特殊樣式了。

  因爲類名在一個HTML文檔中能夠同時存在於不一樣的元素標籤上。換句話說,在一個HTML文檔中,div能夠有類名「yxz」,ul也能夠有類名「yxz」,但有時候咱們只須要在div上設置樣式,就可使用帶有標籤的類名選擇器。

div.yxz{/*樣式*/}

  這樣就能夠只匹配類名爲「yxz」的div元素了。

羣組選擇器

  羣組選擇器(selector1,selectorN)是將具備相一樣式的元素分組在一塊兒,每一個選擇器之間用逗號(,)隔開。

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<style>       
    h1,h2{
        background:black;
        color:white;
        width:200px;
        float:left;
        margin-right:20px;
    }
</style>
</head>
<body>
<h1>胸無大志者,必受制於人</h1>
<h2>丈夫生不五鼎食,死則五鼎烹耳</h2>
</body>
</html>

  表示h1,h2具備相同的樣式。

層次選擇器

  層次選擇器經過HTML的DOM元素間的層次關係獲取元素,其主要的層次關係包括後代,父子,相鄰兄弟和通用兄弟幾種關係,經過其中某類關係能夠方便地選定須要的元素。

後代選擇器

  後代選擇器(E F)也稱爲包含選擇器,中間以空格隔開,做用就是能夠選擇某元素的後代元素。

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<style>       
    div span{
        background:black;
        color:white;
        float:left;
        margin-right:20px;
    }
</style>
</head>
<body>
<div>
    <span>胸無大志者,必受制於人</span>
    <span>丈夫生不五鼎食,死則五鼎烹耳</span>
</div>   
</body>
</html>

  匹配div的後代元素span。

子選擇器

  子選擇器(E>F)只能選擇某元素的子元素,中間用大於號(>)隔開。

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<style>       
    div span{
        background:black;
        color:white;
        float:left;
        margin-right:20px;
    }
</style>
</head>
<body>
<div>
    <span>胸無大志者,必受制於人<span>丈夫生不五鼎食,死則五鼎烹耳</span></span>
</div>   
</body>
</html>

  只能選擇div下的子元素span,span的子元素span是div的後代元素,不能匹配。

相鄰兄弟選擇器

  相鄰兄弟選擇器(E+F)能夠選擇緊接在另外一個元素後的元素,它們具備一個相同的父元素。

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<style>       
    span+span{
        background:black;
        color:white;
    }
</style>
</head>
<body>
<div>
    <span>胸無大志者,必受制於人</span>
    <span>丈夫生不五鼎食,死則五鼎烹耳</span>
    <span>胸無大志者,必受制於人</span>
    <span>丈夫生不五鼎食,死則五鼎烹耳</span>
</div>   
</body>
</html>

  匹配span後面且相鄰的兄弟元素span。由於第三個span相鄰第二個span,第四個span相鄰第三個span,因此也可以匹配。

通用兄弟選擇器

  通用兄弟選擇器(E~F)是CSS3新增長的,用於選擇某元素後面的全部兄弟元素,它們也具備相同的父元素。

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<style>       
    span~span{
        background:black;
        color:white;
    }
</style>
</head>
<body>
<div>
    <span>胸無大志者,必受制於人</span>
    <span>丈夫生不五鼎食,死則五鼎烹耳</span>
    <span>胸無大志者,必受制於人</span>
    <span>丈夫生不五鼎食,死則五鼎烹耳</span>
</div>   
</body>
</html>

  選擇第一個span元素後面的全部兄弟元素span。

僞類選擇器

  css3中的僞類選擇器能夠分紅6種:動態僞類選擇器,目標僞類選擇器,語言僞類選擇器,UI狀態僞類選擇器,結構僞類選擇器和否認僞類選擇器。
  僞類選擇器語法書寫時和其餘的CSS選擇器寫法有所區別,都以冒號(:)開頭。

動態僞類選擇器

  動態僞類並不存在於HTML中,只有當用戶和網站交互的時候才能體現出來。動態僞類包含兩種,第一種是在連接中常看到的錨點僞類,另外一種是用戶行爲僞類。

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<style>       
    a:link{
        color:red;
        text-decoration:none;
    }
    a:visited{
       color:yellow;
    }
    a:hover,a:focus{
        color:blue;
        text-decoration:underline;
    }
    a:active{
        color:black;
    }
</style>
</head>
<body>
<a href="#">胸無大志者,必受制於人</a>   
</body>
</html>

  未訪問時爲紅色且取消下劃線,訪問後爲黃色,用戶停留在連接,或連接得到焦點時顯示下劃線並設置藍色,點擊連接時爲黑色。
  設置動態僞類選擇器時,必須遵循必定的循序。由於這幾個選擇器具備相同的特殊性,因此根據在文檔中的順序來決定更特殊的選擇器。那麼選擇器的循序就相當重要了,正常的循序應該是:link,:visited,:hover,:active。

目標僞類選擇器

  目標僞類選擇器「:target」用來匹配文檔連接中的URI中某個標識符的目標元素。URI中的標識符一般會包含一個井號(#),後面帶有一個標誌符名稱,例如「#yxz」,「:target」就是用來匹配ID爲「yxz」的元素。":target"僞類選擇器選取連接的目標元素,而後定義樣式。

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<style>   
    p{
        font-size:16px;
        line-height:20px;
        width:0;
        height:20px;
        overflow:hidden;
        -moz-transition:width 2s ease-in-out; 
        -webkit-transition:width 2s ease-in-out; 
        transition:width 2s ease-in-out;
        position:absolute;
        visibility:hidden; 
    }
    /*假如目標被選中,後面的P元素如此如此*/    
    div:target p{
        width:220px;
        visibility:visible;
    }
</style>
</head>
<body>
    <!--連接目標分別指向兩個div-->
    <a href="#yxz">點我</a>
    <a href="#sx">點我</a>
    <div id ="yxz">
        <p>胸無大志者,必受制於人</p>
    </div>
    <div id="sx">
        <p>丈夫生不五鼎食,死則五鼎烹耳</p>
    </div>
</body>
</html>

語言僞類選擇器

  語言僞類選擇器是根據元素的語言編碼匹配元素。這種語言信息必須包含在文檔中,或者與文檔關聯,不能從CSS指定。爲文檔指定語言,有兩種方法能夠表示。
  若是使用HTML5,直接能夠設置文檔的語言。

<!DOCTYPE HTML>
<html lang="en-US">

  另外一種方法就是手工在文檔中指定lang屬性,並設置對應的語言值。

<body lang="fr">

  E:lang(language)表示選擇匹配E的全部元素,且匹配元素指定了lang屬性,並且其值爲language。

UI元素狀態僞類選擇器

  主要用於form表單元素上,UI元素的狀態通常包括:啓用,禁用,選中,未選中,得到焦點,失去焦點,鎖定和待機等。在HTML元素中有可用和不可用狀態,例如表單的文本輸入框,還有選中和未選中狀態,例如表單的複選和單選按鈕。這幾種狀態都是CSS3選擇器中經常使用的狀態僞類選擇器。

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<style>
    /*被禁用的表單元素顯示輪廓*/   
    input:disabled{
        outline:1px solid red;
    }   
</style>
</head>
<body>
<form>
    <fieldset>
        <legend>觀海雲遠</legend>
        <label for="ysg">楊肅觀</label>
        <input type="checkbox" name="yxz" id="ysg" />
        <label for="qzh">秦仲海</label>
        <input type="checkbox" name="yxz" id="qzh" disabled="disabled"/>
        <label for="ly">盧雲</label>
        <input type="checkbox" name="yxz" id="ly" />
        <label for="wdy">伍定遠</label>
        <input type="checkbox" name="yxz" id="wdy" />
    </fieldset>
</form>
</body>
</html>

結構僞類選擇器

  根據元素在文檔樹中的某些特性(如相對位置)定位到它們。

  結構僞類選擇器中的參數n能夠是整數,關鍵詞或公式。
  整數:nth-child(3),選擇第3個子元素。
  關鍵詞:odd表明奇數子元素,even表明偶數子元素。
  公式:默認值爲0,每次遞增1。如:n+1,當n=0時,0+1=1,選擇第1個子元素,當n=1時,1+1=2,選擇第2個子元素,到選完全部子元素爲止。

:first-child

  選擇父元素中的第一個子元素。

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<style> 
    /*選擇ul中第1個li元素,改變它的項目符號爲空心圓*/  
    ul li:first-child{
        list-style-type:circle;
    }
</style>
</head>
<body>
<ul>
    <li>楊肅觀</li>
    <li>秦仲海</li>
    <li>盧雲</li>
    <li>伍定遠</li>
</ul>
</body>
</html>

:last-child

  選擇父元素中的最後一個子元素。

/*選擇ul中最後一個li元素,他的項目符號變爲空心圓*/
ul li:last-child{
    list-style-type:circle;
}

:nth-child(n)

  選擇父元素中的一個或多個子元素。

  當n爲整數時:

/*選擇ul中第三個li*/
ul li:nth-child(3){
    list-style-type:circle;
}

  當n爲關鍵詞時:

/*選擇ul中第奇數個li*/
ul li:nth-child(odd){
    list-style-type:circle;
}

  當n爲公式時:

/*選擇ul中第奇數個li*/
ul li:nth-child(n*2-1){
    list-style-type:circle;
}

:nth-last-child(n)

  與:nth-child相似,但倒是從倒數選擇子元素。

  當n爲整數時:

/*選擇ul中倒數第三個li*/
ul li:nth-last-child(3){
    list-style-type:circle;
}

  當n爲關鍵詞時:

/*選擇ul中倒數第奇數個li*/
ul li:nth-last-child(odd){
    list-style-type:circle;
}

  當n爲公式時:

/*選擇ul中倒數第奇數個li*/
ul li:nth-last-child(n*2-1){
    list-style-type:circle;
}

:nth-of-type(n)

  也與:nth-child相似,不一樣的是它只計算父元素中指定某種類型的子元素。

<ul>
    <li>楊肅觀</li>
    <span>王一通</span>
    <li>秦仲海</li>
    <li>盧雲</li>
    <li>伍定遠</li>
</ul>

  當結構中不止一種類型時,使用nth-child就不可以準確的指定元素了,假如我要匹配第2個li,寫做li:nth-child(2)是不可以匹配的,由於文檔中第2個子元素是span,因此匹配失敗。

ul li:nth-of-type(2){
    list-style-type:circle;
}

  :nth-of-type可以從指定類型的子元素開始計數,第2個元素span不是li,因此被忽略。

:nth-last-of-type(n)

  與nth-of-type同樣,都是用來選擇指定某種類型的子元素,但它的計數方向倒是從最後一個指定類型的子元素開始,使用方法與以前提到的nth-last-child同樣。

:only-child

  表示一個元素是它父元素的惟一子元素。換句話說,匹配元素的父元素中僅有一個子元素。

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<style>
    /匹配第2個ul中的li,由於它的父元素只有一個子元素/   
    ul li:only-child{
        list-style-type:circle;
    }
</style>
</head>
<body>
<ul>
    <li>楊肅觀</li>       
    <li>秦仲海</li>
    <li>盧雲</li>
    <li>伍定遠</li>
</ul>
<ul>
    <li>王一通</li>
</ul>
</body>
</html>

:only-of-type

  用來選擇一個元素是它父元素惟一一個指定類型的子元素。

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<style>
    /*選擇第2個ul中的span,由於它的父元素中只有1個span元素*/   
    ul span:only-of-type{
        color:red;
    }
</style>
</head>
<body>
<ul>
    <li>楊肅觀</li>       
    <li>秦仲海</li>
    <li>盧雲</li>
    <li>伍定遠</li>
    <span>小白龍</span>
    <span>伍崇卿</span>
</ul>
<ul>
    <li>盧一雲</li>
    <li>盧二雲</li>
    <li>盧三雲</li>
    <li>盧四雲</li>
    <span>盧五雲</span>
</ul>
</body>
</html>

:empty

  用來選擇沒有任何內容的元素。

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<style>
    /*匹配第2個div,由於它沒有任何內容*/   
    :empty{
        width:100px;
        height:100px;
        background:red;
    }
</style>
</head>
<body>
<div>胸無大志者,必受制於人</div>  
<div></div>
</body>
</html>

否認僞類選擇器

  否認僞類選擇器「:not()」主要用來定位不匹配該選擇器的元素。

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<style>
    /*匹配全部div元素中除了id名爲yxz的全部元素*/   
    div:not([id="yxz"]){
        color:red;
    }
</style>
</head>
<body>
<div>胸無大志者,必受制於人</div>
<div id="yxz">丈夫生不五鼎食,死則五鼎烹耳</div>
<div>大丈夫一輩子碌碌無爲,與朽木腐草無異</div>  
</body>
</html>

僞元素

  僞元素可用於定位文檔中包含的文本,但沒法在文檔樹中定位。僞元素早在css中就存在了,「:first-letter」,「:first-line」,「:before」,「:after」。在css3中對僞元素進行了必定的調整,在之前的基礎上增長了一個冒號,相應的變成了「::first-letter」,「::first-line」,「::before」,「::after」,還增長了一個「::selection」。

::first-line

  選擇文本塊中的第一個字母。

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<style>   
    /*選擇p段落文本中的第一個字*/
    p::first-letter{
        font:normal 900 2em/2em serif;
        float:left;
    }
</style>
</head>
<body>
<p>胸無大志者,必受制於人</p>
</body>
</html>

::first-line

  與::first-letter相似,也是用來選擇文本,不一樣的是,::first-line選擇文本塊的第一行。

/*選擇段落文本中的第一行*/
 p::first-line{
        color:blue;
    }

::before和::after

  能夠在文本塊以前(::before)或文本塊以後(::after)插入額外的內容(content)或樣式,生成的內容不會成爲DOM的一部分。

/*在段落文本前加入內容"《",置爲藍色*/
p::before{
    content:"《";
    color:blue;
}
/*在段落文本後加入內容"》",置爲紅色*/
p::after{
    content:"》";
    color:red;
}

::selection

  匹配突出顯示的文本。僞元素::selection僅接受兩個參數,一個是background,一個是color。瀏覽器默認狀況下,選擇突出的網站文本是深藍色背景,白色的字體。

/*背景色爲灰色,前景色爲白色*/
p::selection{
    background:#808080;
    color:#ffffff;
}
/*爲了支持火狐瀏覽器,須要加上特別的前綴*/   
p::-moz-selection{
    background:#808080;
    color:#ffffff;
}

屬性選擇器

  在HTML中,經過各類各樣的屬性能夠給元素增長不少附加的信息。css2中引入了一些屬性選擇器,這些選擇器可基於元素的屬性來匹配元素,而css3在css2的基礎上擴展了這些屬性選擇器,支持基於模式匹配來定位元素。

E[attr]

  選擇具備屬性attr的元素E。

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<style>
    /*選擇a元素中具備href屬性的元素*/   
   a[href]{
       text-decoration:none;
       color:black;
   }
</style>
</head>
<body>
<a href="http://www.baidu.com" id=「yxz-1」 class="hello world">胸無大志者,必受制於人</a><br />
<a href="http://www.taobao.com" id="yxz-2" class="hello yxz">大丈夫一輩子碌碌無爲,與朽木腐草無異</a>
</body>
</html>

E[attr=val]

  選擇E元素中屬性attr的值爲val的元素。

/*選擇a元素中的href屬性且屬性值爲http://www.baidu.com的屬性*/   
   a[href="http://www.baidu.com"]{
       text-decoration:none;
       color:black;
   }

E[attr|=val]

  選擇E元素中屬性attr的屬性值以val開頭或以val-開頭的元素。

/*選擇a元素中的id屬性且屬性值以yxz或以yxz-開頭的元素*/
a[id|="yxz"]{
    text-decoration:none;
    color:black;
}

E[attr~=val]

  選擇E元素中屬性attr的值val是被空格隔開的字符串。

/*選擇a元素中的class屬性且屬性值yxz是被空格隔開的*/
a[class~="yxz"]{
    text-decoration:none;
    color:black;
}

E[attr*=val]

  選擇E元素中的屬性attr,且值val在字符串的任意處。

/*選擇a元素中的class屬性且屬性值yxz在字符串的任意處*/
a[class*="yxz"]{
    text-decoration:none;
    color:black;
}

E[attr^=val]

  選擇E元素中的屬性attr,且值以val開頭。

/*選擇a元素中的href屬性,且值以http開頭*/
a[href^="http"]{
    text-decoration:none;
    color:black;
}

E[attr$=val]

  選擇E元素中的屬性attr,且值以val結尾。

/*選擇a元素中的href屬性,且值以com結尾*/
a[href$="com"]{
    text-decoration:none;
    color:black;
}

css3選擇器完,但其中運用奧妙,卻永無止

相關文章
相關標籤/搜索