原創|行業資訊|編輯:龔雪|2014-11-03 09:37:58.000|閱讀 2325 次
概述:也許你還不知道CSS里面的這些內容,Selectors、First Line、First Letter、Not Selector、Combinators,那么今天就可以來檢測下你是否知道或使用過下面的內容。
# 界面/圖表報表/文檔/IDE等千款熱門軟控件火熱銷售中 >>
也許標題有點夸大了。雖然不能完全保證大家都不知道這些,但是這也算是一個好機會檢測下你是否知道或使用過下面的內容。
Root
:root { }
使用root可以讓你在DOM中選擇最高級父元素。如果你在寫HTML,那么htnl元素永遠是最高的。
因為對于一個目標元素偽類選擇器有更高特性,你可以用:root重寫<html>元素。
::first-line 選擇器可以讓你選擇段落第一行,當然,還有其他選擇器讓你可以選擇第一段,但是使用這個方式,可以設計第一行樣式,有更大的設計空間。
更令讓驚喜的功能,該選擇器可以重寫。相當棒的,不是嗎。
::first-letter
和上面個的很相似,該選擇器可以讓我們選擇塊級元素的第一個字母。這讓我們在設計首字下沉是非常方便快捷。
:not(x)
:not(x)選擇器在你沒有指定時選擇目標元素,下面的例子將為你詳細說明。
<ul>
<li>List Item</li>
<li>List Item</li>
<li class="active">List Item</li>
<li>List Item</li>
</ul>
不使用"active",也可以選擇所有項目,只需要下面的代碼:
ul li:not(.active) {}
該方式對于添加導航元素相當方便,看看上面的例子,你就知道。
直接相鄰選擇符
span + span
技術上來說,這不是一個選擇器,但可以把兩個選擇器放在一起。使用"+",可以直接選擇元素,把另外一個放在后面。下面是例子:
<section>
<blockquote>Lorem ipsum blah blah blah</blockquote>
<p>Lorem ipsum blah blah blah</p>
<p>Lorem ipsum blah blah blah</p>
</section>
使用下面CSS:
blockquote + p { font-weight: bold; }
第二段元素就會加粗。
General Sibling Combinator
普通相鄰選擇符
figure ~ p {}
使用你設計的頁面層次結構,就是他了。例如,使用上面的代碼,只影響圖形元素后的段落元素。
【年終大促 巔峰盛“慧” 】促銷火熱進行中 iPhone 6 Plus、 iPhone 6、iPad Air等你拿 ,點我查看
FastReport VCL 5新版發布會,2014-11-25 15:00網絡直播,免費看?
本站文章除注明轉載外,均為本站原創或翻譯。歡迎任何形式的轉載,但請務必注明出處、不得修改原文相關鏈接,如果存在內容上的異議請郵件反饋至chenjj@fc6vip.cn
文章轉載自:慧都控件網