:first-child

1、匹配第一個 <p> 元素
<html>
<head>
<style type="text/css">
p:first-child {
  color: red;
  } 
</style>
</head>


<body>
<p>some text</p>
<p>some text</p>
</body>
</html>


2、匹配所有 <p> 元素中的第一個 <i> 元素
<html>
<head>
<style type="text/css">
p > i:first-child {
  font-weight:bold;
  } 
</style>
</head>


<body>
<p>some <i>text</i>. some <i>text</i>.</p>
<p>some <i>text</i>. some <i>text</i>.</p>
</body>
</html>


3、匹配所有作爲第一個子元素的 <p> 元素中的所有 <i> 元素


<html>
<head>
<style type="text/css">
p:first-child i {
  color:blue;
  } 
</style>
</head>


<body>
<p>some <i>text</i>. some <i>text</i>.</p>
<p>some <i>text</i>. some <i>text</i>.</p>
</body>
</html>

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章