兄弟和序选择器

  1. 兄弟选择器
    1.相邻兄弟选择器 CSS2
    作用: 给指定选择器后面紧跟的那个选择器选中的标签设置属性

格式:
选择器1+选择器2{
属性:值;
}

注意点:
1.相邻兄弟选择器必须通过+连接
2.相邻兄弟选择器只能选中紧跟其后的那个标签, 不能选中被隔开的标签

2.通用兄弟选择器 CSS3
作用: 给指定选择器后面的所有选择器选中的所有标签设置属性

格式:
选择器1~选择器2{
属性:值;
}

注意点:
1.通用兄弟选择器必须用~连接
2.通用兄弟选择器选中的是指定选择器后面某个选择器选中的所有标签, 无论有没有被隔开都可以选中

  1. 序选择器
    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 选中父元素中唯一类型的某个标签

:nth-child(odd) 选中同级别中的所有奇数
:nth-child(even) 选中同级别中的所有偶数

:nth-child(xn+y)
x和y是用户自定义的, 而n是一个计数器, 从0开始递增

发布了99 篇原创文章 · 获赞 21 · 访问量 1841

猜你喜欢

转载自blog.csdn.net/qq_43416157/article/details/102846925