css笔记03:伪类first-child

1. 匹配第一个 <p> 元素

在下面的例子中,选择器匹配作为任何元素的第一个子元素的 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>

 

你可能感兴趣的:(first)