很多時候,我們寫網頁樣式時候會遇到如下面圖這種的, 第4個li下面有一行虛線什麼的,這樣迴圈,那麼,如何很方便的用css實現呢!
我們寫的html** 例項如下:
效果如圖:
下面我們來了解一下css選擇器裡面的幾個
:only-child
p:only-child
選擇屬於其父元素的唯一子元素的每個 元素。
3:nth-child(n)
p:nth-child(2)
選擇屬於其父元素的第二個子元素的每個 元素。
3:nth-last-child(n)
p:nth-last-child(2)
同上，從最後乙個子元素開始計數。
3:nth-of-type(n)
p:nth-of-type(2)
選擇屬於其父元素第二個 元素的每個 元素。
3:nth-last-of-type(n)
p:nth-last-of-type(2)
同上，但是從最後乙個子元素開始計數。
3:last-child
p:last-child
選擇屬於其父元素最後乙個子元素每個 元素。
3:first-child
p:first-child
選擇屬於父元素的第乙個子元素的每個 元素。
我們可以使用 :nth-child(
n) 來自動判斷第4個
css**如下
則效果如圖!
當然,上面我介紹了一堆選擇器,使用方法都差不多,例如 要給第一句加樣式,則可以這樣
css3 選擇器 CSS3選擇器
子級選擇器用於選取帶有特定父元素的元素。書寫語法 element1 element2 注意 如果 element2 元素不是父元素 element1 的直接子元素，則不會被選擇。符號之前書寫父級的選擇器，符號之後寫子級選擇器，必須滿足父子級關係才選中標籤 相鄰兄弟選擇器可以用於選擇緊接在另乙個元素後...
css3 選擇器 CSS3選擇器詳解
css3在css2基礎上，增強或新增了許多特性，彌補了css2的眾多不足之處，使得web開發變得更為高效和便捷。比如說，同樣是乙個頭像，可能在低版本的瀏覽器中，頭像方的 在高版本的瀏覽器中，頭像是圓的。漸進增強和優雅降級之間的不同 面試題目 由於css3普遍存在相容性問題，為了避免因相容性帶來的干擾...
CSS3的選擇器
漸進增強 從小到大 先保證最基本的功能 使用者體驗的提公升 優雅降級 從大到小 先針對版本較高的裝置進行專案構建,保證使用者體驗的完美 犧牲一些效果,保證最基本的功能 選擇器 選擇符 id class 型別 div span.後代選擇器 偽類選擇器 偽元素選擇器.屬性選擇器 e attr 選中e元素...