css序选择器分为两大阵营,一个是选择同级别的,一个是选择同类型的
同级别的第几个:
:first-child{}:选中同级别中的第一个标签<!--first代表第一个-->
注意点:不区分类型
:last-child{}:选中同级别中的最后一个标签
注意点:不区分类型
:nth-child(n){}:选中同级别中的第n个标签
注意点:不区分类型
:nth-last-child(n){}:选中同级别中的倒数第n个标签
注意点:不区分类型
:only-child{}:选中父元素中唯一的标签
p:only-child{
color: aqua;
}
<body>
<p>我是段落1</p>
<!--现在同级别<body>标签中,有<p>
<div>
和<div>两个标签,<div>中的<p>是
<p>我是段落2</p>
单独存在的,所以css中设置属性,只有
</div>
<div>中的<p>会响应 -->
</body>
此时的效果是
对:only-child的总结:其实就是判断选择的<p>标签(p:only-child{}因为冒号前是p)是不是同
级标签中的唯一标签,与标签类型无关。
同类型的第几个:
:first-of-type{}:选中同级别中同类型的第一个标签<!--first代表第一个-->
:last-of-type{} :选中同级别中同类型的最后一个标签
:nth-of-type(n){}:选中同级别中同类型的第n个标签
:nth-last-of-type(n){}:选中同级别中同类型的倒数第n个标签
:only-of -type{}:选中同级别中同类型的唯一元素
p:only-of-type{
color: aqua;
}
<body>
<p>我是段落1</p>
<!--此时在<body>标签中,p是单独存在
<div>
的,在<div>中,p也是单独存在的,
<p>我是段落2</p>
所以,两个p都会响应。-->
</div>
</body>
运行结果:
但是当<div>标签中存在多个<p>标签时,则不会对<div>中的<p>标签响应css的值。程序如下:
p:only-of-type{
color: aqua;
}
</style>
</head>
<body>
<p>我是段落1</p>
<div>
<p>我是段落2</p>
<p>我是段落3</p>
</div>
</body>
运行结果如下:
对:only-of-type的总结:其实就是判断<p>标签是不是
同级同类型标签的唯一标签,是唯一标签就响应,有其他同类型标签存在,就不响应css的设置。
额外用途:
在:nth-child(n){}以及相似的:nth开头的选择器中,可以设置n为odd,even和表达式xn+y。
其中odd指的是奇数。even指的是偶数。
表达式xn+y,x和y可自己设置,n就是个计数器,例如:
假设此时有8对<p>标签
<head>
<style>
p:nth-child(2n+1){
color="red";
}
<style>
</head>
<body>
<p>我是段落</p>
<p>我是段落</p>
<p>我是段落</p>
<p>我是段落</p>
<p>我是段落</p>
<p>我是段落</p>
<p>我是段落</p>
<p>我是段落</p>
</body>
此时,n的计数范围是0-8
当n=0时,表达式值为1,则第1个p标签设置为红色;
当n=1时,表达式值为3,则第3个p标签设置为红色;
当n=2时,表达式值为7,则第7个p标签设置为红色;
以此类推。
注意:使用表达式的时候,:nth-child不区分类型。需要区别类型的话,
` 还是要用:nth-of-type.