• 后代选择器比子选择器的范围大，包含子选择器，且包含子选择器的“子孙”选择器，后代选择器使用"空格"符号间隔选择器
  • 子选择器：子选择器只是父选择器的一级子元素，使用">"符号链接选择器
  • 相邻兄弟选择器，是拥有相同父元素，且两个元素相邻，使用"+"符号链接

1. 后代选择器

  • 比如如下html代码，em是h1的后代元素，如下css样式这样写，只会影响h1中的em标签的内容变为红色，不会影响p中em的内容

css：

h1 em {color:red;}

HTML：

<html>

<head>

<style type="text/css">

h1 em {color:red;}

</style>

</head>

<body>

<h1>This is a <em>important</em> heading</h1>

<p>This is a <em>important</em> paragraph.</p>

</body>

</html>

运行结果：

  • h1 em的写法适用于h1中的的所有em，且不管em嵌套多少层都会适用
<h1>This is a <span><p><em>important</em></p></span> heading</h1>

运行结果：

2. 子选择器

下面设置h1的子元素strong标签的内容为红色

第二个h1中，因为strong的父元素不是h1，而是em，所以css中的设置不会对它起作用

css:

h1 > strong {color:red;}

HTML：

<!DOCTYPE HTML>

<html>

<head>

<style type="text/css">

h1 > strong {color:red;}

</style>

</head>

<body>

<h1>This is <strong>very</strong> <strong>very</strong> important.</h1>

<h1>This is <em>really <strong>very</strong></em> important.</h1>

</body>

</html>

运行结果：

3. 相邻兄弟选择器

h1和p拥有相同的父元素body，相邻兄弟选择器需要紧挨着，只会适用于与h1相邻的p标签的内容

css:

h1 + p {margin-top:50px;}

HTML：

<!DOCTYPE HTML>

<html>

<head>

<style type="text/css">

h1 + p {margin-top:50px;}

</style>

</head>

<body>

<h1>This is a heading.</h1>

<p>This is paragraph.</p>

<p>This is paragraph.</p>

<p>This is paragraph.</p>

<p>This is paragraph.</p>

<p>This is paragraph.</p>

</body>

</html>

运行结果：

请记住，用一个结合符只能选择两个相邻兄弟中的第二个元素

所以h1+p只会对第一个p作用，再如下面的例子：

只会对两个列表的第二个及后面的li起作用，对第一个li不会起作用

css：

li + li {font-weight:bold;}

HTML：

<!DOCTYPE HTML>

<html>

<head>

<style type="text/css">

li + li {font-weight:bold;}

</style>

</head>

<body>

<div>

  <ul>

    <li>List item 1</li>

    <li>List item 2</li>

    <li>List item 3</li>

  </ul>

  <ol>

    <li>List item 1</li>

    <li>List item 2</li>

    <li>List item 3</li>

  </ol>

</div>

</body>

</html>

运行结果：

例程来源：

CSS系列之后代选择器、子选择器和相邻兄弟选择器的更多相关文章

  1. CSS后代选择器、子元素选择器、相邻兄弟选择器区别与详解

    派生选择器用的很多,派生选择器具体包括为后代选择器.子元素选择器.相邻兄弟选择器,我们来理解一下他们之间的具体用法与区别. 1.css后代选择器语法:h1 em {color:red;} 表示的是从h ...

  2. 前端学习笔记之CSS后代选择器、子元素选择器、相邻兄弟选择器区别与详解

    派生选择器用的很多,派生选择器具体包括为后代选择器.子元素选择器.相邻兄弟选择器,我们来理解一下他们之间的具体用法与区别. 1.css后代选择器语法:h1 em {color:red;} 表示的是从h ...

  3. CSS后代选择器,子选择器和相邻兄弟选择器

    平时在代码练习中,经常用到后代选择器,子选择器也会用到,这里做个总结: 1,后代选择器和子选择器区别: ①写法不一样:后代选择器的标识为:空格 如:ul li{width:150px;} [ul和li ...

  4. css选择器 兄弟选择器 相邻兄弟选择器 子元素选择器

    1.兄弟选择器: ~ 该选择器会选择当前元素之后的所有相邻指定元素(具有相同父元素的兄弟元素): .p ~ li{ color: blue; } <div> <p class=&qu ...

  5. CSS 相邻兄弟选择器

    相邻兄弟选择器(Adjacent sibling selector)可选择紧接在另一元素后的元素,且二者有相同父元素. 选择相邻兄弟 如果需要选择紧接在另一个元素后的元素,而且二者有相同的父元素,可以 ...

  6. 理解css相邻兄弟选择器

    今天在菜鸟教程看到了css组合选择符的“相邻兄弟选择器”,刚开始对这个概念有些不太理解,通过查阅资料并且经过一些试验总算有了些头绪. 原文解释是“相邻兄弟选择器(Adjacent sibling se ...

  7. CSS相邻兄弟选择器

    相邻兄弟选择器定义:选择紧接在另一个元素后的元素,而且两者有着相同的父元素. 代码一:<body> <h1>This is a heading.</h1> < ...

  8. 04.CSS选择器-->相邻、通用兄弟选择器

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. web CSS的知识- 关于后代选择器，子选择器，兄弟选择器的使用

    1. 后代选择器官方解释:后代选择器可以选择作为某元素后代的元素.理解:选择某一标签的后代中,所有的此标签标记例:ul em {color:red;}就是选择,h1标签后代中中,所有的em.代码如下: ...

随机推荐

  1. ASP.NET SignalR 系列（六）之连接事件

    本章主要介绍下SignalR自带的连接事件 其实再前面的示例中,有出现了一些事件的重载,比如 public override Task OnConnected() 下面简单介绍一下SignalR提供了 ...

  2. 换个语言学一下 Golang （7）——使用函数

    什么是函数 函数,简单来讲就是一段将输入数据转换为输出数据的公用代码块.当然有的时候函数的返回值为空,那么就是说输出数据为空.而真正的处理过程在函数内部已经完成了. 想一想我们为什么需要函数,最直接的 ...

  3. Sonatype安装

    https://www.cnblogs.com/wotoufahaiduo/p/11223834.html Sonatype Nexus Repository Manage admin ccf0cab ...

  4. CCProxy代理

    只要局域网内有一台机器能够上网,其他机器就可以通过这台机器上安装的CCProxy来代理共享上网,最大程度的减少了硬件费用和上网费用.只需要在服务器上CCProxy代理服务器软件里进行帐号设置,就可以方 ...

  5. 推荐一个去除图片人物背景的工具Removebg

    可以在线使用,url:https://www.remove.bg/users/sign_in 用邮箱免注册一个免费账号: 注册的邮箱会收到一封激活账号的邮件: 点击Activate account后激 ...

  6. MySQL Index--BNL/ICP/MRR/BKA

    MySQL关联查询算法: BNL(Block Nested-Loop) ICP(Index Condition Pushdown) MRR(Multi-Range Read) BKA(Batched ...

  7. Linux NFS 共享

    通过NFS网络文件系统,可以通过网络共享目录,让网络上的其他主机可以通过挂载访问共享目录的数据. Server 安装相关软件包 [root@server ~]# yum install nfs-uti ...

  8. 五、Linux_ping命令

    ping命令用法为:“ping 参数 目标主机”.其中参数为零到多个,目标主机可以是IP或者域名. 1.每隔0.6秒ping一次,一共ping 5次: [root@aiezu.com ~]# ping ...

  9. 面试必备技能：HashMap哪些技术点会被经常问到？

    1.为什么用数组+链表? 数组是用来确定桶的位置,利用元素的key的hash值对数组长度取模得到. 链表是用来解决hash冲突问题,当出现hash值一样的情形,就在数组上的对应位置形成一条链表.ps: ...

  10. OpenGL学习（1）—— 测试OpenGL环境是否搭建成功

    一个用来验证OpenGL(glfw + glad)环境是否搭建成功的测试代码 内容为生成一个小窗口 #include <glad/glad.h> #include <GLFW/glf ...