App下載

怎么使用html5中的后代選擇器?后代選擇器的用法詳解!

猿友 2021-05-31 10:13:02 瀏覽數 (3814)
反饋

最近網上很多小伙伴就在問,怎么使用html5中的后代選擇器?看到這我就有點想說的了,對于怎么使用html5中的后代選擇器,這個問題其實還是蠻重要的。對于想要從事互聯(lián)網這塊功的話算是基本都要有所了解的。那么接下來我門就來說說怎么后代選擇器的用法!

用法一:
后代選擇器

我門開始要了解的是,在 html 中擁有兩種選擇器,一個是子元素選擇器,另一個是后代選擇器,那么我們先來說說后代選擇器的用法吧!

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>選擇器</title>
	</head>
	<body>
		<div>
			<div class="box-one">
				<ul class="div-inside">					<li>第一條文字</li>
					<li>第二條文字</li>
				</ul>
			</div>
		</div>
	</body>
</html>
	.box-one ul li{
				/* 輸入樣式 */
			}

我們根據 html 中的代碼來書寫 css 樣式,說明了后代選擇器是由于多個選擇器組成的,而且我們可以像 css 代碼塊中的寫法一樣在選擇器與選擇器兩者中用空格隔開,其實簡單的來說后代選擇器的用法就是呢,只要一個元素是另一個元素的子元素就可以使用了。

方法二:
子元素選擇器

對于子元素選擇器的使用方法,在實際的運用中也是由于多個選擇器組合起來的,但是呢,在這個子元素選擇器中各個元素之間是用“>”這個符號隔開的,在我們使用的時候子元素選擇器的使用要求是要兩個相鄰元素滿足是直接的父子關系的。

.div-inside>li{
				/* 輸入樣式 */
			}

如代碼中所示,我們在使用的時候應遵循子元素選擇器的一個應用,而不用打破這個規(guī)則否者就不能運行。


小結:

對于以上的話就是今天的一個有關于怎么使用html5中的后代選擇器和后代選擇器的用法的解釋了,希望這些經驗對大家有所幫助,對于選擇器不太了解的小伙伴可以在CSS選擇器-菜鳥編程中進行一個系統(tǒng)的學習和了解。


0 人點贊