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

CSS3結(jié)構(gòu)性偽類(lèi)選擇器九種寫(xiě)法

  發(fā)布時(shí)間：2012-04-18 13:50:20   作者：佚名   我要評(píng)論
今天說(shuō)說(shuō)九個(gè)CSS3結(jié)構(gòu)性偽類(lèi)選擇器

一、X:nth-child(n)

Example Source Code ：
 li:nth-child(3) {
color: red;
}
　　接下來(lái)的幾個(gè)偽類(lèi)選擇器使用上非常類(lèi)似，功能也比較接近。
　　:nth-child(n)，用于匹配索引值為n的子元素。索引值從1開(kāi)始。
　　X:nth-child()用法實(shí)際上有三種變化，demo的用法是最簡(jiǎn)單的，X:nth-child()更強(qiáng)大的用處在于奇偶匹配，明河不展開(kāi)講，有興趣的請(qǐng)看《Understanding :nth-child Pseudo-class Expressions》,《CSS3 :nth-child()偽類(lèi)選擇器》

二、X:nth-last-child(n)

Example Source Code ：
 li:nth-last-child(2) {
color: red;
}
　　:nth-child(n)，是從第一個(gè)開(kāi)始算索引，而X:nth-last-child(n)是從最后一個(gè)開(kāi)始算索引。

三、X:nth-of-type(n)

Example Source Code：
ul:nth-of-type(3) {
border: 1px solid black;
}
　　nth-of-type與nth-child的效果是驚人的相似，想要更多的了解nth-of-type請(qǐng)看《Alternative for :nth-of-type() and :nth-child()》，:nth-of-type(N)

四、X:nth-last-of-type(n) 

Example Source Code ：
ul:nth-last-of-type(3) {
border: 1px solid black;
}
　　:nth-last-child效果相似。

五、X:first-child 

Example Source Code：
 ul li:first-child {
border-top: none;
}
　　匹配子集的第一個(gè)元素。IE7就可以支持了，這個(gè)偽類(lèi)還是非常有用的。

六、X:last-child

 Example Source Code ：
ul > li:last-child {
color: green;
}
　　與:first-child效果相反
　　留意IE8支持:first-child,但不支持:last-child。

七、X:only-child

Example Source Code：
 div p:only-child {
color: red;
}
　　　這個(gè)偽類(lèi)一般用的比較少，比如上述代碼匹配的是div下的有且僅有一個(gè)的p，也就是說(shuō)，如果div內(nèi)有多個(gè)p，將不匹配。

八、X:only-of-type

Example Source Code：
 li:only-of-type {
font-weight: bold;
}
　　與:only-child類(lèi)似。

九、X:first-of-type

Example Source Code ：
ul:first-of-type{
font-weight: bold;
}

相關(guān)文章

  • 使用before和:after偽類(lèi)制作css3圓形按鈕

    這篇文章主要介紹了使用before和:after偽類(lèi)制作css3圓形按鈕,需要的朋友可以參考下
    2014-04-08

  • 兩種CSS3偽類(lèi)選擇器詳細(xì)介紹

    css偽類(lèi)選擇器對(duì)于大家來(lái)說(shuō)最熟悉的莫過(guò)于:link,:focus,:hover之類(lèi)的了，本文為大家介紹下兩種新增的Css3偽選擇器，感興趣的朋友不要錯(cuò)過(guò)
    2013-12-24

  • CSS3 :nth-child()偽類(lèi)選擇器實(shí)現(xiàn)奇偶行顯示不同樣式

    css3的強(qiáng)大，讓人驚嘆，今天我們就來(lái)“前瞻”一下CSS3的一個(gè)偽類(lèi)選擇器“:nth-child()”實(shí)現(xiàn)奇偶行顯示不同樣式，具體的詳細(xì)示例可以參考下文，希望對(duì)大家有所幫助
    2013-11-05

  • CSS3 選擇器 偽類(lèi)選擇器介紹

    前面花了兩節(jié)內(nèi)容分別在《CSS3選擇器——基本選擇器》和《CSS3選擇器——屬性選擇器》介紹了CSS3選擇器中的基本選擇器和屬性選擇器使用方法，今天要和大家一起學(xué)習(xí)CSS3選擇
    2012-01-21

  • 利用CSS3的checked偽類(lèi)實(shí)現(xiàn)OL的隱藏顯示的方法

    隨著CSS3的發(fā)布，國(guó)外研究正如火如荼，但在國(guó)內(nèi)還有很多人抱著IE不支持CSS3的想法，始終無(wú)動(dòng)于衷不肯去學(xué)習(xí)。
    2010-12-18

  • CSS3 偽類(lèi)選擇器 nth-child()說(shuō)明

    CSS3標(biāo)準(zhǔn)已提出數(shù)年，但是目前能實(shí)現(xiàn)她的瀏覽器并不多，雖然部分瀏覽器能實(shí)現(xiàn)部分規(guī)范，但這又有什么用呢？面對(duì)更多的兼容性問(wèn)題，今天我們就來(lái)“前瞻”一下CSS3的一個(gè)偽類(lèi)
    2010-07-10

  • 詳解css3中的偽類(lèi)before和after常見(jiàn)用法

    這篇文章主要介紹了詳解css3中的偽類(lèi)before和after常見(jiàn)用法,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
    2020-11-17

最新評(píng)論