DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> WEB網站前端 >> WEB前端代碼 >> CSS樣式中的大於號(>)
CSS樣式中的大於號(>)
編輯:WEB前端代碼     
div span是上下文選擇符,表示選擇div裡面的所有span,注意是所有的,無論是不是直接承下關系。

但是div>span不同。 >(大於號)是子代選擇符,它表示的是選擇div的子代span。

例如在結構

<div id="keleyi">
<span id="erzi-keleyi-com">兒子span
<span id="sunzi-keleyi-com">孫子span</span>
</span>
</div>
<span>非div內部span</span>

div>span只能選擇id="erzi-keleyi-com"的span,因為它是div的子代。而id="sunzi-keleyi-com"的span沒有被選擇。

下面為實例代碼:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>css大於號示例-</title>
<style>
div{border:1px solid green;margin:10px}/*div為綠色邊框*/
span{display:block;background-color:Silver;padding:10px;margin:10px;}/*span背景顏色為銀色*/
div>span{border:1px solid red;}/*有大於號*/
</style>
</head>
<body>
<div><a href="http:///menu/webqd/" target="_blank">web前端</a> <a href="http:///keleyi/phtml/divcss/9a.htm" target="_blank">沒有大於號的</a><br />
</div>
<div>只有div的兒子span元素有紅色邊框</div>
<div id="keleyi">
<span id="erzi-keleyi-com">div兒子span
<span id="sunzi-keleyi-com">div孫子span <a href="http:///a/bjac/0oj2l9ht.htm" target="_blank">原文</a></span>
</span>
</div>
<span>非div內部span</span>

</body>
</html>

以上代碼效果預覽:http:///keleyi/phtml/divcss/9.htm
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved