萬盛學電腦網

 萬盛學電腦網 >> 網頁制作 >> DivCSS教程 >> CSS上下文選擇符實現基於位置為HTML元素添加樣式

CSS上下文選擇符實現基於位置為HTML元素添加樣式

CSS的選擇符有三種。①上下文選擇符;②ID和Class選擇符;③屬性選擇符,而上下文選擇符的最大好處就是可以方便的實現基於位置為HTML元素添加樣式
比如我們想位於article和aside標簽中的p標簽,設置不同的樣式

上下文選擇符也叫後代組合式選擇符,是以空格分隔標簽名的,其格式為:
標簽1 標簽2 {聲明}
這裡的標簽就是HTML元素,標簽2是我們想要選擇的目標,而且只有在標簽1是標簽2的祖先元素時才能選中標簽2.只要是祖先元素即可,不一定非要是父元素

我們以下列HTML代碼為例,進行演示:
 

復制代碼 代碼如下:
<!DOCTYPE html> 2: <html>
<head>
<title>HTML 5 Template</title>
<meta charset="utf-8">
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<article>
<h1>上下文選擇符</h1>
<p>這是位於article元素中的p元素</p>
</article>
<aside>
<p>這是位於aside中的p元素</p>
</aside>
</body>
</html>


在沒有應該CSS樣式的情況,查看運行效果

copyright © 萬盛學電腦網 all rights reserved