18 CSS3选择器——子元素选择器

1、el:first-of-type

el:first-of-type匹配的el元素是其⽗元素的第⼀个⼦元素

p:first-of-type {
  color: aqua;
}

<div class="test1111">
  	<h1>html5</h1>
  	<p>html5........</p>
  	<p>css3........</p>
  </div>
  <div class="css333">
    <p>dlkfjldkjfk</p>
  </div>
  <div class="html5css3">
    djkfjdkfj
  </div>

2、el:last-of-type

el:last-of-type匹配的el元素是其⽗元素的最后⼀个⼦元素
html代码如上所示：

p:last-of-type {
  color: red;
}

3、el:only-of-type

el:only-of-type匹配的el元素是其⽗元素唯⼀的⼦el元素（子元素也许有多个）

<div class="test1111">
	<h1>html5</h1>
	<p>html5........</p>
</div>
<div class="css333">
  <p>dlkfjldkjfk</p>
</div>
<div class="html5css3">
  djkfjdkfj
</div>

p:only-of-type {
  color: yellow;
}

4、el:only-child

el:only-child匹配属于⽗元素中唯⼀⼦元素的el元素（子元素只有一个）

<div class="test1111">
	<h1>html5</h1>
	<p>html5........</p>
</div>
<div class="css333">
  <p>dlkfjldkjfk</p>
</div>
<div class="html5css3">
  djkfjdkfj
</div>

p:only-child {
  color: blue;
}

5、el:nth-child(n)

el:nth-child(n)匹配⽗元素中的第n个⼦元素，⼦元素不是el元素则不⽣效

• n可以是数字，关键字或者公式

<div class="test1111">
	<h1>html5</h1>
	<p>html5........</p>
	<p>css3........</p>
</div>
<div class="css333">
  <p>dlkfjldkjfk</p>
  <span>span标签</span>
</div>
<div class="html5css3">
  djkfjdkfj
</div>

p:nth-child(2) {
  color: red;
}

6、el:nth-last-child(n)

el:nth-last-child(n)匹配⽗元素中的倒数第n个⼦元素，⼦元素不是el元素则不⽣效。

• n可以是数字，关键字或者公式
  html代码如上所示：

p:nth-last-child(2) {
  color: blue;
}

7、el:nth-last-of-type(n)

el:nth-last-of-type(n)匹配⽗元素中同类型的倒数第n个⼦元素（所有的el子元素中倒数第n个）

• n可以是数字，关键字或者公式

<div class="test1111">
	<h1>html5</h1>
	<p>1html5........</p>
	<p>2css3........</p>
	<span>第1个span标签</span>
	<p>3html5........</p>
	<p>4css3........</p>
</div>
<div class="css333">
  <p>dlkfjldkjfk</p>
	<span>span标签</span>
</div>
<div class="html5css3">
  djkfjdkfj
</div>

p:nth-last-of-type(3){
  color: red;
}

8、el:last-child

el:last-child匹配⽗元素中最后⼀个⼦元素（最后一个子元素为el）
html代码如上所示：

p:last-child {
  color: blue;
}