CSS重要知識點有哪些

這篇文章主要講解了“CSS重要知識點有哪些”，文中的講解內(nèi)容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“CSS重要知識點有哪些”吧！

Selectors

Root

:root { }

使用root可以讓你在DOM中選擇最高級父元素。如果你在寫HTML,那么htnl元素永遠是最高的。因為對于一個目標元素偽類選擇器有更高特性，你可以用:root重寫元素。

使用:root改變背景顏色

First Line

::first-line 選擇器可以讓你選擇段落第一行，當然，還有其他選擇器讓你可以選擇第一段，但是使用這個方式，可以設計第一行樣式，有更大的設計空間。

更令讓驚喜的功能，該選擇器可以重寫。相當棒的，不是嗎。

改變段落第一行元素

First Letter

::first-letter

和上面?zhèn)€的很相似，該選擇器可以讓我們選擇塊級元素的第一個字母。這讓我們在設計首字下沉是非常方便快捷。

::first-letter首字下沉效果

Not Selector

:not(x)

:not(x)選擇器在你沒有指定時選擇目標元素，下面的例子將為你詳細說明。

List Item   
List Item    
List Item    
List Item 

不使用"active",也可以選擇所有項目，只需要下面的代碼：

ul li:not(.active) {}

該方式對于添加導航元素相當方便，看看上面的例子，你就知道。

使用:not() 選擇所有列出的元素，不使用active

Combinators

直接相鄰選擇符

span + span

技術上來說，這不是一個選擇器，但可以把兩個選擇器放在一起。使用"+"，可以直接選擇元素，把另外一個放在后面。下面是例子：

Lorem ipsum blah blah blah     Lorem ipsum blah blah blah  Lorem ipsum blah blah blah

使用下面CSS：

blockquote + p { font-weight: bold; }

第二段元素就會加粗。

引用元素后面使用相鄰選擇符

General Sibling Combinator

普通相鄰選擇符

figure ~ p {}

使用你設計的頁面層次結構，就是他了。例如，使用上面的代碼，只影響圖形元素后的段落元素。

使用普通相鄰選擇符選擇所有段落

感謝各位的閱讀，以上就是“CSS重要知識點有哪些”的內(nèi)容了，經(jīng)過本文的學習后，相信大家對CSS重要知識點有哪些這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！