层级选择器

html元素之间的关系

父级与子级之间的关系

如下示例代码所示，元素是 元素的父级元素，反之 元素是 元素的子级元素。

<ul id="parent">
    <li id="child"></li>
</ul>

兄弟之间的关系

如下示例代码所示，元素是两个 元素的父级元素，即两个 元素拥有同一个父级元素，那么这两个 元素就是兄弟元素

<ul id="parent">
    <li id="child1"></li>
  <li id="child2"></li>
</ul>

祖先与后代之间的关系

如下示例代码所示，元素和 元素是 元素的后代元素，反之 元素是 和 元素的祖先元素

<div id="ancestor">
    <ul id="parent">
    <li id="child1"></li>
    <li id="child2"></li>
  </ul>
</div>

如上图所示，可以将 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”之间是通过加号（+）操作符进行连接的。

普通兄弟选择器

普通兄弟选择器是将某个元素作为目标元素，定位与该目标元素拥有同一个父级元素的之后任意指定元素。普通兄弟选择器的语法结构如下所示：

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

上述语法结构具体说明如下：

• 选择器1：表示某个目标元素。
• 选择器2：定位与“选择器1”拥有同一个父级元素的之后任意“选择器2”元素。
• 连接符：“选择器1”和“选择器2”之间是通过波浪号（~）操作符进行连接的。