css序选择器
一，序选择器1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>18-css序选择器.html</title>
<!--
序选择器:
css3中新增的选择器最具代表性的就是序选择器
1,同级别的第几个
:first-child 选中同级别中的第一个
:last-child 选中同级别中的最后一个
:nth-child(n) 选中同级别中的第n个
:nth-last-child(n) 选中同级别中的倒数第n个
:only-child 选中父元素中只有一个子元素的元素
注意点:不区分类型
2,同类型的第几个
:first-of-type 选中同级别中同类型的第一个
:last-of-type 选中同级别中同类型的最后一个
:nth-of-type(n) 选中同级别中同类型的第n个
:nth-last-of-type(n) 选中同级别中同类型的倒数第n个
:only-of-type 选中父元素中子元素的类型只有一种的元素
-->
<style>
/*p:first-child{*/
/*color: red;*/
/*}*/
/*
p:first-of-type{
color: red;
}*/
/*p:last-child{
color: greenyellow;
}*/
/*p:last-of-type{
color: green;
}*/
/*p:nth-child(3){
color: red;
}*/
/*p:nth-of-type(3){
color: burlywood;
}*/
/*p:nth-last-child(2){
color: purple;
}*/
/*p:nth-last-of-type(2){
color: yellow;
}*/
/*p:only-child{
color: purple;
}*/
p:only-of-type{
color: red;
}
</style>
</head>
<body>
<!--<div>
<p>我是段落5</p>
<p>我是段落6</p>
<p>我是段落7</p>
<p>我是段落8</p>
<p>我是段落9</p>
</div>
-->
<p>我是段落1</p>
<div>
<h1>我是标题</h1>
<p>我是段落</p>
<p>我是段落2</p>
</div>
</body>
</html>二，序选择器2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>18-序选择器下.html</title>
<!--
:nth-child(odd) 选中同级别中所有的奇数
:nth-child(even) 选中同级别中所有的偶数
:nth-of-type(odd) 选中同类型同级别中所有的奇数
:nth-of-type(even) 选中同类型同级别中所有的偶数
:nth-child(xn + y) 选中同级别中所有的 xn + y
:nth-of-type(xn + y) 选中同类型同级别中所有的 xn + y
n: 代表的是同级别中所有的元素,计数器,n是从0开始递增的
x: 代表选中同级别中n的倍数
y: 代表选中同级别中的元素是从第几个开始的
-->
<style>
/*P:nth-child(odd){
color: red;
}*/
/*p:nth-child(even){
color: yellow;
}*/
/*p:nth-of-type(odd){
color: blue;
}*/
/*p:nth-of-type(even){
color: green;
}*/
/*p:nth-child(3n + 1){
color: red;
}*/
p:nth-of-type(3n + 1){
color: green;
}
</style>
</head>
<body>
<p>我是项目</p>
<p>我是项目</p>
<h1>我是标题</h1>
<p>我是项目</p>
<p>我是项目</p>
<h1>我是标题</h1>
<p>我是项目</p>
<p>我是项目</p>
<div>
<p>我是段落</p>
<p>我是段落2</p>
<p>我是段落3</p>
</div>
<h1>我是标题</h1>
<p>我是项目</p>
<p>我是项目</p>
</body>
</html>