同级别的第几个：
第一种：
:first-child 意思为：选中同级别标签中的第一个标签。
注意点：不区分类型。（任何标签类型都可以使用）
例子：
给同级别标签中的第一个标签的内容设置为红色。
一、
内容：
代码：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>序选择器</title> <base target="_self"> <style> p:first-child{ color: red; } </style> </head> <body> <p>我是段落1</p> <p>我是段落2</p> <div> <p>我是段落3</p> <p>我是段落4</p> <p>我是段落5</p> </div> </body> </html>
效果图：
二、
内容：
代码：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>序选择器</title> <base target="_self"> <style> p:first-child{ color: red; } </style> </head> <body> <h1>我是标题</h1> <p>我是段落1</p> <p>我是段落2</p> <div> <p>我是段落3</p> <p>我是段落4</p> <p>我是段落5</p> </div> </body> </html>
效果图：
以上两个不同的原因是因为：
:first-child是用来选择同级别中的第一个。因为:first-child不会区分类型的，是什么标签类型就选出什么标签类型。（:first-child只管取同级别的第一个，不管取得是什么东西）
p:first-child的意思是：选出同级别中的第一个，然后再判断是否是<p>标签，如果是就改变属性，如果不是就不改变样式和属性。（x:first-child意思是取同级别的第一个，然后再判断是否是x标签。）
第二种
:last-child
选中同级别中最后一个标签。
注意点：不区分类型。（意思是不管是什么标签都会被选出，因为:last-child不会区分标签的类型，只要是同级别的最后一个就会被选出）。
x:last-child的意思是：先选出同级别的最后一个标签，然后再判断该标签，是否与<x>标签相同，相同则进行对应的修饰，不相同则不进行。
例子：
将每个相同级别的最后一个的标签的内容改成红色的。
内容：
代码：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>序选择器</title> <base target="_self"> <style> p:last-child{ color: red; } </style> </head> <body> <h1>我是标题</h1> <p>我是段落1</p> <p>我是段落2</p> <div> <p>我是段落3</p> <p>我是段落4</p> <p>我是段落5</p> </div> </body> </html>效果图：
第三种
:nth-child(n)意思是：选中同级别的第n个标签。
例子：
将同级别的第三个标签的内容变成红色。
内容：
代码：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>序选择器</title> <base target="_self"> <style> p:nth-child(3){ color: red; } </style> </head> <body> <h1>我是标题</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> </body> </html>效果图：
第四种
:nth-last-child(n)意思：选中同一级别中的倒数第n个。
同类型的第几个：
第一种：
:first-of-type 意思是：选中同级别中同类型的第一个标签。
例子：把“我是段落1”和“我是段落3”变为红色。
我是段落3是同级别的第一个，也是同级别中同类型的第一个。
我是段落1是同级别中同类型的第一个。
内容：
代码：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>序选择器</title> <base target="_self"> <style> p:first-of-type{ color: red; } </style> </head> <body> <h1>我是标题</h1> <p>我是段落1</p> <p>我是段落2</p> <div> <p>我是段落3</p> <p>我是段落4</p> <p>我是段落5</p> </div> </body> </html>效果：
:first-of-type意思是：选中同级别中同类型的第一个。
x:first-of-type意思是：先选出同级别同类型的第一个，然后再判断是否是<x>标签。
*什么是同级别中同类型的第一个？
内容中的：
第一部分：<h1>、<p>、<p>、<div>属于同一级别。其中<p>、<p>属于同一类型。其中第一个<p>就是所要选中的同一级别中同一类型的第一个标签。
第二部分：<p>、<p>、<p>属于同一个级别，同时也属于同一个类型。这三个<p>中的第一个<p>就是所要选中的同一级别中同一类型的第一个标签。
总上所述：
<p>我是段落1</p>
<p>我是段落3</p>上面两个就是同一级别同一类型的第一个标签。
我是段落1是第一个同一级别中的同一类型的第一个标签。
我是段落3是第二个同一级别中的同一类型的第一个标签。
第二种
:last-of-type 意思是：选中相同级别中相同类型的最后一个标签。
例子：
将我是段落2和我是段落5变成红色。
第一个相同级别：
<h1></h1>
<p></p>
<p></p>
<div></div>
第二个相同级别：
<p></p>
<p></p>
<p></p>
我是段落2：是第一个相同级别中相同类型的最后一个标签。
我是段落5：是第二个相同级别中相同类型的最后一个标签。
内容：
代码：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>序选择器</title> <base target="_self"> <style> p:last-of-type{ color: red; } </style> </head> <body> <h1>我是标题</h1> <p>我是段落1</p> <p>我是段落2</p> <div> <p>我是段落3</p> <p>我是段落4</p> <p>我是段落5</p> </div> </body> </html>效果图：
第三种
:nth-of-type(n)意思是：选中同级别中同类型的第n个标签。
例子：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>序选择器</title> <base target="_self"> <style> p:nth-of-type(3){ color: red; } </style> </head> <body> <h1>我是标题</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> </body> </html>
第四个
:nth-last-of-type(n)意思：选中同一级别中同一类型的倒数第n个标签。
特殊的
第一种：
:only-child
意思是：选出每个标签中的唯一的子标签。
例子
内容：
1.<body>标签中有两个子标签，一个是<p>标签，一个是<div>标签。所以<body>标签中没有唯一的子标签。
2.第一个<p>标签中没有任何子标签。
3.<div>标签中有唯一的子标签:<p>标签。
所以所有的标签中，只从<div>标签中选出唯一的子标签<p>，然后对<p>标签中的内容进行修饰。
要求：让每个标签中的唯一的子标签的内容变成红色。
代码1：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>序选择器</title> <base target="_self"> <style> p:only-child{ color: red; } </style> </head> <body> <p>我是段落1</p> <div> <p>我是段落2</p> </div> </body> </html>效果图：
1.我是段落1没有变红的原因是：第一个<p>没有任何的子标签，其本身就是一个父标签。
2.我是段落2是<div>标签唯一的子标签。
代码2：
内容变为：
代码
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>序选择器</title> <base target="_self"> <style> p:only-child{ color: red; } </style> </head> <body> <p>我是段落1</p> <div> <p>我是段落2</p> <p>我是段落3</p> </div> </body> </html>效果图：
<div>标签中有两个<p>标签（<p>我是段落2</p> <p>我是段落3</p>），这样“我是段落2”就不是唯一的子元素了。
第二种
:only-of-type 意思是：选中每个标签中的唯一类型的子标签。
内容：
<body>中有两个子标签，分别为：<p>,<div>。其中<p>是唯一类型的子标签。
<div>中有两个子标签，分别为：<p>,<h1>。其中<p>,<h1>
代码：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>序选择器</title> <base target="_self"> <style> p:only-of-type{ color: red; } </style> </head> <body> <p>我是段落1</p> <div> <p>我是段落2</p> <h1>我是段落3</h1> </div> </body> </html>
p:only-of-type这句话的意思是：先选出每个标签中唯一类型的子标签，然后再从这些子标签中选出<p>标签。
x:only-of-type
意思是：先从每个标签中选出唯一类型的子标签，然后再判断是否是<x>标签，如果是则进行修饰，不是则不进行修饰。
效果图：
总结：
1.
:only-of-type 选中父标签中唯一类型的某个标签。
2.
:only-child 选中父标签中唯一的标签。
自定义类型
第一种
:nth-child(odd)选中同级别中所有的奇数。
内容：
代码：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>序选择器</title> <base target="_self"> <style> p:nth-child(odd){ color: red; } </style> </head> <body> <p>我是段落</p> <p>我是段落</p> <p>我是段落</p> <p>我是段落</p> <p>我是段落</p> <p>我是段落</p> <p>我是段落</p> </div> </body> </html>效果图：
’
第二种
:nth-child(even)意思是：选中同级别中所有的偶数。
内容：
代码：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>序选择器</title> <base target="_self"> <style> p:nth-child(even){ color: red; } </style> </head> <body> <p>我是段落</p> <p>我是段落</p> <p>我是段落</p> <p>我是段落</p> <p>我是段落</p> <p>我是段落</p> <p>我是段落</p> </div> </body> </html>效果图：
*第三种
:nth-child(xn+y)x，y是自己根据实际情况定义的。
n是同级别标签的个数。
内容：
一共有7个同级别的标签，所以n从0开始自加，一直自加到7。
n的取值范围为：0~7。
*怎么判断n的取值范围？
先确定有几个同级别的标签（同级别标签的个数），0~同级别标签个数 就为n的取值范围。
n从0开始自加，自加到同级别标签的个数。
一、
:nth-child(2n+0)
:nth-child(even)
:nth-child(2n+1)
:nth-child(odd)
236
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
