css学习之css选择器（3）

2014-07-29

1、CSS :first-child Selector

版本：css2

用法：用于选择父级的第一个子元素

支持版本：

pc：ie7+、all chrome versions、all firefox versions、all safair versions、all opera versions

mobile：all ios safair versions、all opera mini versions、all Android Browser versions

eg：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>dsky</title>
<style id="jsbin-css">
p:first-child{background:#666;}
div p:first-child{background:#ddd;}
</style>
</head>
<body>
<p>body的第一个p</p>
<p>body的第二个p</p>
<div>
  <p>div的第一个p</p>
  <p>div的第二个p</p>
</div>
</body>
</html>

预览地址：http://jsbin.com/malik/1

2、CSS3 :last-child Selector

版本：css3

用法：用于选择父级的最后一个子元素

支持版本：

pc：ie8+、all chrome versions、all firefox versions、all safair versions、all opera versions

mobile：all ios safair versions、all opera mini versions、all Android Browser versions

eg：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>dsky</title>
<style id="jsbin-css">
p:last-child{background:#666;}
div p:last-child{background:#ddd;}
</style>
</head>
<body>
<div>
  <p>div的第一个p,body的第一个p</p>
  <p>div的第二个p,body的第二个p</p>
</div>
<p>body的第三个p</p>
<p>body的第四个p</p>
</body>
</html>

预览地址：http://jsbin.com/malik/3

3、CSS3 :not Selector

版本：css3
用法：用于选择除了选中元素以外的元素

支持版本：

pc：ie8+、all chrome versions、all firefox versions、all safair versions、all opera versions

mobile：all ios safair versions、all opera mini versions、all Android Browser versions

eg：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>dsky</title>
<style id="jsbin-css">
p{background:#ddd;}
div:not(p){background:#666;}
</style>
</head>
<body>
<p>body的p元素</p>
  <div>
    <span>span元素</span>
    <ul>
      <li>li元素</li>
    </ul>
    <p>div的p元素</p>
  </div>
</body>
</html>

预览地址：http://jsbin.com/yehile/1

4、CSS3 :nth-child() Selector

版本：css3
用法：th-child(n) selector matches every element that is the nth child, regardless of type, of its parent.n can be a number, a keyword, or a formula.

支持版本：

pc：ie8+、all chrome versions、all firefox versions、all safair versions、all opera versions

mobile：all ios safair versions、all opera mini versions、all Android Browser versions

eg：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>dsky</title>
<style id="jsbin-css">
p:nth-child(2){background:#ddd;}
ul li:nth-child(odd){background:#333;}
ul li:nth-child(even){background:red;}
.div1span span:nth-child(2n+1){background:#666;}
.div2span span:nth-child(2n+1){background:#f;}
</style>
</head>
<body>
<p>第一个p</p>
<p>第二个p</p>
<p>第三个p</p>
<ul>
  <li>第一个li</li>
  <li>第二个li</li>
  <li>第三个li</li>
</ul>
<div class="div1span">
  <span>第一个span</span><br/>
  <span>第二个span</span><br/>
  <span>第三个span</span><br/>
  <span>第四个span</span><br/>
  <span>第五个span</span>
</div>
<div class="div2span">
  <span>第一个span</span>
  <span>第二个span</span>
  <span>第三个span</span>
  <span>第四个span</span>
  <span>第五个span</span>
</div>
</body>
</html>

预览地址：http://jsbin.com/yehile/2