CSS基础笔记三，关系选择器（后代选择器，子代选择器，相邻兄弟选择器，通用兄弟选择器）

2023-06-29 21:40| 来源: 网络整理| 查看: 265

关系选择器，分为四大类

1，后代选择器

2，子代选择器

3，相邻兄弟选择器

4，通用兄弟选择器

一，基础选择器复习

二，关系选择器之后代选择器

三，关系选择器之子代选择器

四，关系选择器之相邻兄弟选择器

五，通用兄弟选择器

总结

一，基础选择器复习

基础选择器有那些？

1，id选择器 #id名称{}

2，类选择器 .类名{}

3，元素选择器元素{}

4，合并选择器选择器1，选择器2

二，关系选择器之后代选择器

后代选择器器，所有包含在父代里面的子代，中间用空格隔开。注意这个只会修改后代，不会修改父代

格式父代子代 {}

代码演示：

/**/ .list1 li{ color: pink; } 三，关系选择器之子代选择器

子代选择器父代>子代{} 只是包含子代，不往下递归

代码：

/* 子代选择器只是子生效，嵌套的孙子不生效*/ .t2>a{ color:sandybrown; } 四，关系选择器之相邻兄弟选择器

相邻兄弟选择器大哥+二哥只是二哥生效大哥不生效后面的平级也不生效

/*相邻兄弟选择器，只是选择下面的一个，多的就不选择了 */ .t3+h1{ color: #fa4d15; } 五，通用兄弟选择器

通用兄弟选择器大哥~二哥后面的平级都生效但是自己大哥不生效

/*通用兄弟选择器，选择面的全部兄弟平级的*/ .t4 ~ p{ color: red; } 总结关系选择器 1，后代选择器父代子代{} 所有包含在父代里面的子代中间用空格隔开 2，子代选择器父代>子代{} 只是包含子代，不往下递归 3，相邻兄弟选择器大哥+二哥只是二哥生效大哥不生效后面的平级也不生效 4，通用兄弟选择器大哥~二哥后面的平级都生效但是自己大哥不生效关系选择器 /**/ .list1 li{ color: pink; } /* 子代选择器只是子生效，嵌套的孙子不生效*/ .t2>a{ color:sandybrown; } /*相邻兄弟选择器，只是选择下面的一个，多的就不选择了 */ .t3+h1{ color: #fa4d15; } /*通用兄弟选择器，选择面的全部兄弟平级的*/ .t4 ~ p{ color: red; } 列表1 孙子孙子列表2 子孙子

我是大哥

我是二哥我是三哥我是大哥1

我是二哥1标签

我是三个1标签

【本文地址】

公司简介

联系我们