css3學習總結1 CSS3選擇器

2021-09-07 00:20:08 字數 1797 閱讀 7584

css3的屬性選擇器主要包括以下幾種:

示例

css3選擇器,或者css3結構類,首先列出他具有的選擇方法:

示例:

.classnameli:first-child 

.classnameli:last-child

.classname> p:first-of-type

.classname>p:last-of-type

示例:

1. 簡單數字序號寫法 :nth-child(number),直接匹配第number個元素。引數number必須為大於0的整數。

如下,把第3個p的背景設為綠色:

p:nth-child(3)

2. 倍數寫法 :nth-child(an),匹配所有倍數為a的元素。其中引數an中的字母n不可預設,它是倍數寫法的標誌,如3n、5n。

如下,把第2、第4、第6、…、所有2的倍數的p的背景設為藍色:

p:nth-child(2n)

3. 倍數分組匹配 :nth-child(an+b)與:nth-child(an-b),先對元素進行分組,每組有a個,b為組內成員的序號,其中字母n和加號+不可預設,位置不可調換,這是該寫法的標誌,其中a,b均為正整數或0。

如下,匹配第1、第4、第7、…、每3個為一組的第1個p元素

p:nth-child(3n+1)

如下,匹配第3-1=2、第6-1=5、…、第3的倍數減1個p元素

p:nth-child(3n-1)

4. 奇偶匹配 :nth-child(odd)與:nth-child(even)分別匹配序號為奇數與偶數的元素。奇數(odd)與(2n+1)結果一樣;偶數(even)與(2n+0)及(2n)結果一樣。

這裡,我們為奇數和偶數p元素指定兩種不同的背景色:

p:nth-child(odd)

p:nth-child(even)

.classname p:nth-last-child(4)

:nth-of-type類似於:nth-child,不同的是他只計算選擇器中指定的那個元素,其實我們前面的例項都是指定了具體的元素,這個選擇器主要對用來定位元素中包含了好多不同型別的元素是很有用處。

:nth-last-of-type(n)選擇器匹配屬於父元素的特定型別的第n個子元素的每個元素,從最後乙個子元素開始計數(n可以是數字或公式)。

e:only-child,匹配那些是其父元素唯一子元素的e元素。簡單來說就是匹配父元素中只有乙個子元素的型別元素。說白了就是e元素的父級只有它本身乙個子元素。

:only-of-type是表示乙個元素他有很多個子元素,而其中只有乙個子元素是唯一的。

所以我們使用這種選擇器就可以選中元素的唯一子元素。

說白了就是選擇它的各型別子元素中個數只有乙個的那一類

div :only-of-type

empty是用來選擇沒有任何內容的元素,這裡沒有內容指的是一點內容都沒有,哪怕是乙個空格。

css3學習筆記 css3選擇器

e attr 屬性選擇器 e attr val 屬性選擇器 e attr val 屬性選擇器 e attr val 屬性選擇器 e attr val 屬性選擇器 e attr val 屬性選擇器 e attr val 屬性選擇器 css ul,li lihtml class linksitem id...

css3 選擇器 CSS3選擇器

子級選擇器用於選取帶有特定父元素的元素。書寫語法 element1 element2 注意 如果 element2 元素不是父元素 element1 的直接子元素,則不會被選擇。符號之前書寫父級的選擇器,符號之後寫子級選擇器,必須滿足父子級關係才選中標籤 相鄰兄弟選擇器可以用於選擇緊接在另乙個元素後...

css3選擇器總結

選擇器分為 共分為10種 基本選擇器 萬用字元 元素選擇器 e id選擇器 id 類選擇器 class 群組選擇器 selectori,selectorv 瀏覽器對選擇器都可使用 層次選擇器 後代選擇器 e f 子選擇器 e f 相鄰兄弟選擇器 e f 通用選擇器 e f 偽類選擇器 一般有 lin...