個性原創,打造品牌

拒絕模仿抄襲、拒絕模板建站;
多位資深網頁設計師同時設計,讓您優中選優;
網站獨一無二,品牌輕易提升...

了解詳情 >

代碼規范,國際標準

后臺php+mysql動態管理,功能強大,千萬級數據;
前臺div+css生成靜態,代碼精簡,訪問速度快,
符合w3c國際標準,兼容ie/火狐/蘋果等任意瀏覽器...

了解詳情 >

細微高效,全程無憂

域名一個,主機一臺;
主機BGP多線路,5G存儲空間,流量不限;
新聞錄入、圖片處理、數據備份、安全監測、網站升級...

了解詳情 >

移動時代,機不可失

全新視覺、創新操作;
跨平臺兼容,微信無縫對接;
不容錯過的手機網絡商機,不能錯過的手機網站時代...

了解詳情 >

搜索領先,鎖定訪客

在主流搜索引擎的搜索結果中,
網站的名稱,排在第一頁的第一名,
網站其他相關的3-5個關鍵詞,排在第一頁...

了解詳情 >

營銷利器,決勝千里

全國統一呼叫,品牌企業的象標志。
中國電信4008/4009、中國聯通4000/4006,號碼任選;
通話資費預存...

了解詳情 >
以“信”為主的服務理念,“源”為標桿的服務特點351532641點擊咨詢010-86203368聯系電話
CSS問題設計問題程序問題優化問題

CSS標簽語法:詳解選擇符中的關系選擇符

發布時間:2017-11-03      瀏覽次數:717

相信大家都對CSS選擇符都不陌生,選擇符包含:元素選擇符、關系選擇符、屬性選擇符、偽類選擇符、偽對象選擇符。在眾多的選擇符中,可以讓我們根據自己的需要更加靈活性的選擇合適的選擇符來對樣式進行編寫,達到最大的質量和效率。

今天就為大家介紹下選擇符中的關系選擇符,“關系”這可是一等一的大事啊,我們得理清楚,這樣做事情才能更加的有效率。不然在CSS中有你受的,哈哈。關系選擇符有四個類別:包含選擇符、子選擇符、相鄰選擇符、兄弟選擇符。接下來為大家一一介紹。在這里特別的說明一下,我們平常中最常用的的是包含選擇符,為什么我們都習慣用這個呢?因為在IE6瀏覽器中,只支持包含選擇符,其他的均不支持。在以往(現在有點改觀了)IE6是瀏覽器市場的主角,用戶覆蓋率極高,所以對于那些IE6所不支持的,也必然造成我們很少用到甚至根本不用的現象。但是記得在一篇文章看到,現在HTML5/CSS3是未來的一個趨勢,而HTML5/CSS3將會重視起以前那些被我們誤認為沒有什么用的標簽的運用。也許在某一天,IE6真正的功成身退了,不再折騰考驗我們了,那些我們誤以為沒有用的標簽語法將會掀起一次CSS效率大革命。哈哈,純屬個人幻想。請勿當成珍珠一樣真。

包含選擇符(E F)

語法:
E F{ sRules }
說明:
選擇所有被E元素包含的F元素。
示例:

<meta charset="utf-8" />
<style>
ul li{color:#f00;}
</style>
<ul>
	<li>項目列表1</li>
	<li>項目列表2</li>
	<li>項目列表3</li>
	<li>項目列表4</li>
</ul>

輸出結果圖片:

 

輸出結果說明:ul li表示在ul下面所有的li都會有作用,只要是屬于ul的li都會起作用。

子選擇符(E>F)

語法:
E>F{ sRules }
說明:
選擇所有作為E元素的子元素F。 
示例:

<meta charset="utf-8" />
<style>
.test>li>a{color:#f00;}
</style>
<ul class="test">
	<li>
		<a href="http://www.jiawin.com">列表項目1</a>
		<ul>
			<li><a href="http://www.jiawin.com">項目列表1.1</a></li>
			<li><a href="http://www.jiawin.com">項目列表1.2</a></li>
		</ul>
	</li>
	<li>
		<a href="http://www.jiawin.com">列表項目2</a>
		<ul>
			<li><a href="http://www.jiawin.com">項目列表2.1</a></li>
			<li><a href="http://www.jiawin.com">項目列表2.2</a></li>
		</ul>
	</li>
	<li><a href="http://www.jiawin.com">列表項目3</a></li>
	<li><a href="http://www.jiawin.com">列表項目4</a></li>
</ul>

輸出結果圖片:

 

輸出結果說明: .test > li > a 表示對在選擇器test下面的 li 標簽下面 a 標簽起作用。只有屬于這個關系的才會起作用,大家可以從上面的例子看到,有些 li 元素的下面還有 ul li 的選擇符,但是卻不會起到作用。由此可見,子選擇符比包含選擇符提供了更精細的控制。結合上面的兩個例子我們也可以得出:包含選擇符的深度和廣度超過子對象選擇符;而子對象選擇符的針對性和唯一性比包含選擇符強。這也就是包含選擇符和子選擇符的區別,這是一個比較容易混淆的地方。

相鄰選擇符(E+F)

語法:
E+F{ sRules }
說明:
選擇緊貼在E元素之后F元素。
示例:

<meta charset="utf-8" />
<style>
p+p{color:#f00;}
</style>
<div>
	<h3>標題:覺唯前端</h3>
	<p>副標題:享受web前端開發和用戶體驗設計的樂趣</p>
	<p>副標題:享受web前端開發和用戶體驗設計的樂趣</p>
	<h3>標題:覺唯前端</h3>
	<p>副標題:享受web前端開發和用戶體驗設計的樂趣</p>
	<h3>標題:覺唯前端</h3>
	<p>副標題:享受web前端開發和用戶體驗設計的樂趣</p>
	<p>副標題:享受web前端開發和用戶體驗設計的樂趣</p>
</div>

輸出結果圖片:

 

輸出結果說明:p+p表示只有在 p元素之后緊連接著另一個p元素,才會對第二個p元素開始起到作用。也就是只有在結構中的后面兩個p元素起到作用,而假如在<p></p><h3></h3><p></p>結構中,卻不會對任何標簽取到作用,因為p標簽沒有形成兩個以上(包括兩個)的連續。

兄弟選擇符(E~F)

語法:
E~F{ sRules }
說明:
選擇E元素后面的所有兄弟元素F。

<meta charset="utf-8" />
<style>
p~p{color:#f00;}
</style>
<div>
	<h3>標題:覺唯前端</h3>
	<p>副標題:享受web前端開發和用戶體驗設計的樂趣</p>
	<p>副標題:享受web前端開發和用戶體驗設計的樂趣</p>
	<h3>標題:覺唯前端</h3>
	<p>副標題:享受web前端開發和用戶體驗設計的樂趣</p>
	<h3>標題:覺唯前端</h3>
	<p>副標題:享受web前端開發和用戶體驗設計的樂趣</p>
	<p>副標題:享受web前端開發和用戶體驗設計的樂趣</p>
</div>

輸出結果圖片:

 

輸出結果說明:p~p表示只要出現第一個p元素之后,接下來只要有p元素都會起到作用的(也就是在一個結構中,第二次出現p元素就會起到作用)。假如選擇符設置成 p~p~p 那么同理,會在第三個(包含第三個)p元素開始簽到作用。

 

注:建議大家可以對以上的示例隨意的更改<style></style>里面的樣式選擇符,然后去測試看看輸出的結果。只有自己動手去實驗了,才能記的更加的牢固。

 

通過上面的舉例說明,大家都已經了解了各種關系選擇符的用法。那么我們在日常中,怎么去運用這些選擇符呢?那就得看大家的聰明才智了。或許在以后會寫一些利用這些選擇符來制作的一些效果,和大家一起來研究探討。合理的有效利用,不但可以提高我們的代碼質量而且還大大的提高我們的效率。

上一篇:HTML5和css3實例:制作HTML5驗證的網頁表單
下一篇:已經是最后一篇

Copyright©2016  xinycx.com  All Rights Reserved  北京信源創想科技有限公司  備案號:京ICP備17071760號
地址:北京市海淀區閔莊路門頭馨村北二區33號樓3單元102室  電話:010-86203368  

北京網站建設 北京網站制作 信源創想 品牌網站建設 企業網站建設 網站設計 APP開發 微信開發 前端切圖 DIV+CSS html5切圖 APP切圖

海南七星彩玩法