【学习笔记】html css 层级选择器基础知识复习

层级选择器

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 css 层级选择器基础知识复习

如上图所示,可以将 HTML 元素的结构按照 3 种关系划分:

css选择器种类

后代选择器

后代选择器是将某个元素当做祖先元素,定位该元素的所有后代元素。后代选择器的语法结构如下所示

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

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

子级选择器

子级选择器是将某个元素当做父级元素,定位该元素的所有子级元素。子级选择器的语法结构如下所示:

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

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

相邻兄弟选择器

相邻兄弟选择器是将某个元素作为目标元素,定位与该目标元素拥有同一个父级元素的下一个指定元素。相邻兄弟选择器的语法结构如下所示:

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

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

普通兄弟选择器

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

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

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

上一篇

【学习笔记】css组合选择器基础知识复习