[分享]css兄弟元素第三个设置

在CSS中，兄弟元素是指同层级中共享相同父元素的元素。在CSS选择器中兄弟元素的选择符是一个加号（+）。我们可以使用兄弟选择器来选择在另一个元素之后的第一个兄弟元素。而兄弟元素第三个的选择符是:nth...

在CSS中，兄弟元素是指同层级中共享相同父元素的元素。在CSS选择器中兄弟元素的选择符是一个加号（+）。我们可以使用兄弟选择器来选择在另一个元素之后的第一个兄弟元素。而兄弟元素第三个的选择符是:nth-of-type(3)，意思是选择同类元素中第三个。

例如： 
p + p 选择第一个p元素后的第一个p元素，即同层级的兄弟元素第一个。
p + p + p 选择第一个p元素后的第二个p元素，即同层级的兄弟元素第二个。
p:nth-of-type(3) 选择同类元素中第三个p元素。 

使用兄弟元素第三个的选择器可以在网页中精准的选择我们需要的元素。这个选择器可以应用于各种不同的场景，比如我们想对同类元素中的第三个a链接进行样式设置，我们就可以这样写：

a:nth-of-type(3){
    font-size: 20px;
    color: red;
} 

这段代码可以将同类元素中第三个a链接的字体大小设置为20像素，并将颜色设置为红色。兄弟元素第三个选择器的使用非常便捷，能够让我们快速的为某个页面元素添加样式，提高了开发效率，同时还能让页面更加美观。