CSS選擇器中大於號>的作用

admin發表於2017-02-24
CSS

在css中，大於號>也是選擇器，能夠選中指定元素的一級子元素，例如:

[CSS] 純文字檢視 複製程式碼
div>span{}

以上程式碼可以匹配div下的第一級span子元素。

與此選擇器比較你接近的是包含選擇器，例如:

[CSS] 純文字檢視 複製程式碼
div span{}

以上程式碼可以匹配div下的所有span元素，無論是否是一級子元素。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
#top>span{color:red}
#bottom span{color:blue}
</style>
</head>
<body>
<div id="top">
  <span>螞蟻部落一</span>
  <p><span>螞蟻部落二</span></p>  
</div>
<div id="bottom">
  <span>螞蟻部落一</span>
  <p><span>螞蟻部落二</span></p>  
</div>
</body>
</html>

以上程式碼已經很很好的演示了兩個選擇器的功能和區別。

相關閱讀:

1.子選擇器可以參閱CSS 子選擇符(E>F)一章節。 

2.包含選擇器可以參閱CSS 包含選擇符(E F)一章節。

相關文章