<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*p:first-child{*/
/* color: red;*/
/*}*/
/*p:last-child{*/
/* color: red;*/
/*}*/
/*p:nth-child(2){*/
/* color: red;*/
/*}*/
/*p:nth-last-child(3){*/
/* color: red;*/
/*}*/
/*p:only-child{*/
/* color: red;*/
/*}*/
p:only-of-type{
color:red;
}
</style>
</head>
<body>
<!--
序选择器分为两大类:
1.针对于同级别的:
p:first-child:查找与p同级别的第一个标签，如果是仍然是p标签，就设置
p:last-child
p:nth-child(2):正数
p:nth-last-child(3)：倒数
p:only-child:选择与p同级别的，并且这个级别只有一个标签
2.针对于同类型并且同级别的:
p:first-of-type:查找与p同级别且同类型的标签
p:last-of-type
p:nth-of-type(3)
p:nth-last-of-type(3)
p:only-of-type：与p同级别的且同类型的只有一个，也就是说这个级别，只有一个p标签
-->
<h1>我是标题1</h1>
<p>我是段落1</p>
<p>我是段落2</p>
<p>我是段落3</p>
<p>我是段落4</p>
<div>
<p>我是段落5</p>
<p>我是段落6</p>
<p>我是段落7</p>
<p>我是段落8</p>
</div>
<h1>我是标题2</h1>
<h1>我是标题1</h1>
<p>我是段落1</p>
<p>我是段落2</p>
<p>我是段落3</p>
<p>我是段落4</p>
<div>
<p>我是段落5</p>
<p>我是段落5</p>
<h1>我是标题3</h1>
</div>
<h1>我是标题2</h1>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>13-序选择器 下</title>
<style>
p:nth-of-type(3n){
color: red;
}
</style>
</head>
<body>
<!--
1.同级别
p:nth-child(odd):选中同级别的奇数标签
p:nth-child(even)
p:nth-child(xn-y):n为0到正无穷大，x和y可以是正整数也可以是负整数，但必须是整数，小数无效
2.同级别且同类型
p:nth-of-type(odd)
p:nth-of-type(even)
p:nth-of-type(xn+y)
-->
<p>我是段落1</p>
<p>我是段落2</p>
<p>我是段落3</p>
<p>我是段落4</p>
<p>我是段落5</p>
<p>我是段落6</p>
<p>我是段落7</p>
<p>我是段落8</p>
<p>我是段落9</p>
<p>我是段落10</p>
</body>
</html>
