CSS3中新增的选择器最具代表性的就是序选择器
| 选择器 | 例子 | 例子描述 |
|---|---|---|
| :first-of-type | p:first-of-type | 选择属于其父元素的首个 <p> 元素的每个 <p> 元素。 |
| :last-of-type | p:last-of-type | 选择属于其父元素的最后 <p> 元素的每个 <p> 元素。 |
| :only-of-type | p:only-of-type | 选择属于其父元素唯一的 <p> 元素的每个 <p> 元素。 |
| :only-child | p:only-child | 选择属于其父元素的唯一子元素的每个 <p> 元素。 |
| :nth-child(n) | p:nth-child(2) | 选择属于其父元素的第二个子元素的每个 <p> 元素。 |
| :nth-last-child(n) | p:nth-last-child(2) | 同上，从最后一个子元素开始计数。 |
| :nth-of-type(n) | p:nth-of-type(2) | 选择属于其父元素第二个 <p> 元素的每个 <p> 元素。 |
| :nth-last-of-type(n) | p:nth-last-of-type(2) | 同上，但是从最后一个子元素开始计数。 |
| :last-child | p:last-child | 选择属于其父元素最后一个子元素每个 <p> 元素。 |
| :first-of-type | p:first-of-type | 选择属于其父元素的首个 <p> 元素的每个 <p> 元素。 |
| :last-of-type | p:last-of-type | 选择属于其父元素的最后 <p> 元素的每个 <p> 元素。 |
| :only-of-type | p:only-of-type | 选择属于其父元素唯一的 <p> 元素的每个 <p> 元素。 |
| :only-child | p:only-child | 选择属于其父元素的唯一子元素的每个 <p> 元素。 |
| :nth-child(n) | p:nth-child(2) | 选择属于其父元素的第二个子元素的每个 <p> 元素。 |
| :nth-last-child(n) | p:nth-last-child(2) | 同上，从最后一个子元素开始计数。 |
| :nth-of-type(n) | p:nth-of-type(2) | 选择属于其父元素第二个 <p> 元素的每个 <p> 元素。 |
| :nth-last-of-type(n) | p:nth-last-of-type(2) | 同上，但是从最后一个子元素开始计数。 |
| :last-child | p:last-child | 选择属于其父元素最后一个子元素每个 <p> 元素。 |
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*偶数:*/
p:nth-child(even){
/*让偶数个变成红色*/
color: red;
}
/*奇数:*/
p:nth-child(odd){
/*让偶数个变成红色*/
color: green;
}
/* 每3个的第一个字体加下划线
xn+y: x和y是可以自定义的
n:会自动的从0开始增大,直到标签已经找完
*/
p:nth-child(3n+1){
text-decoration: underline;
}
/* 每10个的第7个字体变成20px*/
p:nth-child(10n+7){
font-size: 20px;
}
</style>
</head>
<body>
<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>
<p>我是第11个段落</p>
<p>我是第12个段落</p>
<p>我是第13个段落</p>
<p>我是第14个段落</p>
<p>我是第15个段落</p>
<p>我是第16个段落</p>
<p>我是第17个段落</p>
<p>我是第18个段落</p>
<p>我是第19个段落</p>
<p>我是第20个段落</p>
</body>
图片.png
<style>
/*
需求:按顺序指定的标签设置相应的属性
序选择器: 可以按照顺序选择相应的标签,不会单独使用
*/
/*p:first-of-type{*/
/*!* 同级别中,同类型的第一个*!*/
/*color: red;*/
/*}*/
p:last-of-type{
/* 同级别中,同类型的倒数第一个*/
color: yellowgreen;
}
h1:nth-of-type(2){
/* 同级别中,同类型的第几个*/
font-style: italic;
}
p:nth-last-of-type(2){
/* 同级别中,同类型的倒数第几个*/
text-decoration: underline;
}
h3:only-of-type{
/* 同级别中,同类型的唯一一个*/
font-size: 40px;
}
</style>
</head>
<body>
<p>sldkjg</p>
<h3>我是h3</h3>
<p>我是倒数第二个</p>
<div>
<p>我是div中的段落</p>
<p>我是div中的段落</p>
<p>我是div中的段落</p>
<p>我是div中的段落</p>
<h1>我是标题1</h1>
<h1>我是标题1</h1>
<h1>我是标题1</h1>
<h3 class="choose">sldkjg</h3>
<div>
<h1>laskdjg</h1>
<p>我也是div中的段落</p>
<p>我也是div中的段落</p>
<p>我也是div中的段落</p>
<p>我也是div中的段落</p>
<p>我也是div中的段落</p>
<ul>
<li>11111</li>
<li>11111</li>
<li>11111</li>
</ul>
</div>
</div>
<div>
<h5>askldgj</h5>
<h3>askldgj</h3>
</div>
</body>
图片.png
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*偶数:*/
p:nth-child(even){
/*让偶数个变成红色*/
color: red;
}
/*奇数:*/
p:nth-child(odd){
/*让偶数个变成红色*/
color: green;
}
/* 每3个的第一个字体加下划线
xn+y: x和y是可以自定义的
n:会自动的从0开始增大,直到标签已经找完
*/
p:nth-child(3n+1){
text-decoration: underline;
}
/* 每10个的第7个字体变成20px*/
p:nth-child(10n+7){
font-size: 20px;
}
</style>
</head>
<body>
<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>
<p>我是第11个段落</p>
<p>我是第12个段落</p>
<p>我是第13个段落</p>
<p>我是第14个段落</p>
<p>我是第15个段落</p>
<p>我是第16个段落</p>
<p>我是第17个段落</p>
<p>我是第18个段落</p>
<p>我是第19个段落</p>
<p>我是第20个段落</p>
</body>
图片.png
