乔越

发表文章数:114

四代商业主题

高扩展、安全、稳定、响应式布局多功能模板。

¥69 现在购买
首页 » 编程语言 » HTML » 【学习笔记】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 种关系划分:

  • 兄弟元素: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”之间是通过波浪号(~)操作符进行连接的。

未经允许不得转载:作者:乔越, 转载或复制请以 超链接形式 并注明出处 乔越博客
原文地址:《【学习笔记】html css 层级选择器基础知识复习》 发布于2020-01-02

分享到:
赞(1) 打赏 生成海报

评论 1

1 + 2 =
  1. #1

    快递空包网,就找单号无忧www.dh5u.com

    jktr2天前回复

长按图片转发给朋友

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

Vieu4.5主题
专业打造轻量级个人企业风格博客主题!专注于前端开发,全站响应式布局自适应模板。
切换注册

登录

忘记密码 ?

您也可以使用第三方帐号快捷登录

Q Q 登 录
微 博 登 录
切换登录

注册