层级选择器
html元素之间的关系
父级与子级之间的关系
如下示例代码所示,元素是
元素的父级元素,反之 元素是
元素的子级元素。
|
兄弟之间的关系
如下示例代码所示,元素是两个
元素的父级元素,即两个 元素拥有同一个父级元素,那么这两个
元素就是兄弟元素
|
祖先与后代之间的关系
如下示例代码所示,元素和
元素是 元素的后代元素,反之
元素是 和
元素的祖先元素
|
如上图所示,可以将 HTML 元素的结构按照 3 种关系划分:
- 兄弟元素:ancestor1 元素和 ancestor2 元素、parent1 元素和 parent2 元素,以及 child11 元素和 child12 元素。
- 父级与子级元素:
- 如果 “ 元素是父级元素的话,那 ancestor1 元素和 ancestor2 元素就是子级元素。
- 如果 ancestor1 元素是父级元素的话,那 parent1 元素和 parent2 元素就是子级元素。
- 如果 parent1 元素是父级元素的话,那 child11 元素和 child12 元素就是子级元素。
- 祖先与后代元素:
- 如果 “ 元素是祖先元素的话,那其包含的所有元素都是后代元素。
- 如果 ancestor1 元素是祖先元素的话,那其包含的所有元素都是后代元素。
- 如果 parent1 元素是祖先元素的话,那其包含的所有元素都是后代元素。
css选择器种类
- 后代选择器
- 子级选择器
- 相邻兄弟选择器
- 普通兄弟选择器
后代选择器
后代选择器是将某个元素当做祖先元素,定位该元素的所有后代元素。后代选择器的语法结构如下所示
|
上述语法结构具体说明如下:
- 选择器1:表示某个祖先元素。
- 选择器2:定位“选择器1”的指定“选择器2”的后代元素。
- 连接符:“选择器1”和“选择器2”之间是通过空格(’ ‘)操作符进行连接的。
子级选择器
子级选择器是将某个元素当做父级元素,定位该元素的所有子级元素。子级选择器的语法结构如下所示:
|
上述语法结构具体说明如下:
- 选择器1:表示某个父级元素。
- 选择器2:定位“选择器1”的指定“选择器2”的子级元素。
- 连接符:“选择器1”和“选择器2”之间是通过大于号(>)操作符进行连接的。
相邻兄弟选择器
相邻兄弟选择器是将某个元素作为目标元素,定位与该目标元素拥有同一个父级元素的下一个指定元素。相邻兄弟选择器的语法结构如下所示:
|
上述语法结构具体说明如下:
- 选择器1:表示某个目标元素。
- 选择器2:定位与“选择器1”拥有同一个父级元素的下一个“选择器2”元素。
- 连接符:“选择器1”和“选择器2”之间是通过加号(+)操作符进行连接的。
普通兄弟选择器
普通兄弟选择器是将某个元素作为目标元素,定位与该目标元素拥有同一个父级元素的之后任意指定元素。普通兄弟选择器的语法结构如下所示:
|
上述语法结构具体说明如下:
- 选择器1:表示某个目标元素。
- 选择器2:定位与“选择器1”拥有同一个父级元素的之后任意“选择器2”元素。
- 连接符:“选择器1”和“选择器2”之间是通过波浪号(~)操作符进行连接的。