你一無所知的CSS
也許標(biāo)題有點(diǎn)夸大了。雖然不能完全保證大家都不知道這些，但是這也算是一個好機(jī)會檢測下你是否知道或使用過下面的內(nèi)容。
Selectors
Root
- :root { }
使用root可以讓你在DOM中選擇***級父元素。如果你在寫HTML,那么htnl元素永遠(yuǎn)是***的。因?yàn)閷τ谝粋€目標(biāo)元素偽類選擇器有更高特性，你可以用:root重寫元素。
使用:root改變背景顏色
First Line
::first-line 選擇器可以讓你選擇段落***行，當(dāng)然，還有其他選擇器讓你可以選擇***段，但是使用這個方式，可以設(shè)計(jì)***行樣式，有更大的設(shè)計(jì)空間。
更令讓驚喜的功能，該選擇器可以重寫。相當(dāng)棒的，不是嗎。
改變段落***行元素
First Letter
- ::first-letter
和上面?zhèn)€的很相似，該選擇器可以讓我們選擇塊級元素的***個字母。這讓我們在設(shè)計(jì)首字下沉是非常方便快捷。
::first-letter首字下沉效果
Not Selector
- :not(x)
:not(x)選擇器在你沒有指定時選擇目標(biāo)元素，下面的例子將為你詳細(xì)說明。
- List Item
- List Item
- List Item
- List Item
不使用"active",也可以選擇所有項(xiàng)目，只需要下面的代碼：
- ul li:not(.active) {}
該方式對于添加導(dǎo)航元素相當(dāng)方便，看看上面的例子，你就知道。
使用:not() 選擇所有列出的元素，不使用active
Combinators
直接相鄰選擇符
- span + span
技術(shù)上來說，這不是一個選擇器，但可以把兩個選擇器放在一起。使用"+"，可以直接選擇元素，把另外一個放在后面。下面是例子：
- 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 {}
使用你設(shè)計(jì)的頁面層次結(jié)構(gòu)，就是他了。例如，使用上面的代碼，只影響圖形元素后的段落元素。
使用普通相鄰選擇符選擇所有段落
