css匹配指定元素的子元素程式碼例項

antzone發表於2017-03-31
CSS

本章節通過程式碼例項介紹一下如何匹配指定元素的子元素。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
div{
  margin:50px;
}
#box{
  width:300px;
  height:300px;
  background:red;
}
#middle{
  width:200px;
  height:200px;
}
#inner{
  width:100px;
  height:100px;
  position:absolute;
  left:300px;
  top:300px;
}
#box > div{
  background:blue;
}
</style> 
</head> 
<body> 
<div id="box">  
  <div id="middle">  
    <div id="inner">螞蟻部落</div>  
  </div>  
</div>  
</body> 
</html>

從上面的程式碼可以看出>選擇器只能夠匹配指定元素的第一級子元素。

#box>div和#box div的區別是，前面只能匹配第一級div子元素，第二個是匹配下面的所有div元素。

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

相關文章