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

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. json.dumps()包装中文字符串

    开发环境 系统: ubuntu18.04 系统编码: $LANG = en_US.UTF-8 python解释器版本: Python 3.6.7 乱码现场 使用 json.dumps() 将 dict ...

  2. iOS开发，导入c文件引发的Could not build module 'UIKit'问题

    导致出现异常的原因是是因为工程中添加了某(第三方开源库) 一般情况下出现“Unknown type name”是头文件互相引用出现的,这里可以排除,由于源码使用是c\c++与oc混编, 考虑新的XCo ...

  3. python 工厂方法

    工厂方法模式(FACTORY METHOD)是一种常用创建型设计模式,此模式的核心精神是封装类中变化的部分,提取其中个性化善变的部分为独立类, 通过依赖注入以达到解耦.复用和方便后期维护拓展的目的. ...

  4. 在DoNetCore MVC 中如何使用AutoMapper

    刚开始,按照在donet mvc 的方法写了一遍,发现行不通啊,于是百度了一下,找到这么一篇 https://stackoverflow.com/questions/41284349/automapp ...

  5. Python学习日记(三十一) 黏包问题

    import subprocess res = subprocess.Popen('dir',shell=True,stdout=subprocess.PIPE,stderr=subprocess.P ...

  6. 刷脸支付袭来，WeChat Pay & AliPay争宠，究竟谁能笑到最后？

    移动支付的快速发展,让我们摆脱了对现金的依赖,即使我们出门忘记带现金,那也没关系,我们照样可以通过手机来完成支付.现如今无论是大商场.还是水果摊都支持二维码付款,这也就意味着智慧化的生活正在一步步地向 ...

  7. Gtest：死亡测试

    转自:玩转Google开源C++单元测试框架Google Test系列(gtest)之五 - 死亡测试 一.前言 “死亡测试”名字比较恐怖,这里的“死亡”指的的是程序的崩溃.通常在测试过程中,我们需要 ...

  8. Linux-网络RAID技术DRBD

    DRBD简介 官方文档 DRBD的全称为:Distributed Replicated Block Device(DRBD)分布式块设备复制,DRBD是由内核模块和相关脚本构成,用以构建高可用的集群. ...

  9. C++（四十九） — set、multiset 容器的基本操作

     1.set的基础知识 set的特性是:所有元素都会根据元素的键值自动排序,set的元素不像map那样可以同时拥有实值(value)和键值(key),set元素的键值就是实值,实值就是键值.set不允 ...

  10. X.509

    参考:https://baike.baidu.com/item/X.509/2817050?fr=aladdin 标题:X.509  百度百科 在密码术中,X.509是定义公用密钥证书格式的标准. X ...