派生选择器用的很多，派生选择器具体包括为后代选择器、子元素选择器、相邻兄弟选择器，我们来理解一下他们之间的具体用法与区别。

1、css后代选择器
语法：h1 em {color:red;} 表示的是从h1开始里面包含的所有的em元素变成红色，h1为祖先，其他的em都是后代，即选中后代，不管是儿子还是孙子，只要是都会被选中，为后代选择器。
例如

<html>

<head>

<style type="text/css">

ul em {color:red; font-weight:bold;}

</style>

</head>

<body>

<ul>

<li>List item 1

<ol>

<li>List item 1-1</li>

<li>List item 1-2</li>

<li>List item 1-3

<ol>

<li>List item 1-3-1</li>

<li>List item <em>1-3-2</em></li>

<li>List item 1-3-3</li>

</ol>

</li>

<li>List item 1-4</li>

</ol>

</li>

<li>List item 2</li>

<li>List item 3</li>

</ul>

</body>

</html>

运行结果：

即，无论你在哪里，我都要选中你，因为你是我的后代。

2、css子元素选择器
语法：h1>em{color:red;} 表示的是从h1开始里面的第一层em元素变成红色，h1为祖先，em为儿子，就像世袭制一样，只能传给儿子，孙子和其他堂亲都不行，例如

<style type="text/css">

h1 > strong {color:red;}

</style>

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

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

运行结果：

只有第一个h1会变色。

3、相邻兄弟选择器
语法：h1 + p {margin-top:50px;} 表示是“选择紧接在 h1 元素后出现的段落，h1 和 p 元素拥有共同的父元素”这是官方的说法，理解的误区在于这个加号，h1和p并不是同时被选中的，而是选择的是h1紧跟着后面的p元素，是递进的关系，例如：

<!DOCTYPE HTML>

<html>

<head>

<style type="text/css">

li + li {color:red;}

</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>

运行的结果是这样的：

li+li选择的是第二个li，同理也可以理解成紧跟着第二个li的兄弟，即是第三个li，当然是在同一个级别下。所以出现第二、三li被选中。

参考

前端学习笔记之CSS后代选择器、子元素选择器、相邻兄弟选择器区别与详解的更多相关文章

  1. 2、前端学习笔记之——css

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

  2. 【学习笔记】薛定谔的喵咪Cat—球盒问题（全详解）

    [学习笔记]薛定谔的喵咪Cat-球盒问题(全详解) [题目描述] 当一个猫在盒子里时,因为放射物的状态我们不知道,所以猫的状态我们也不知道,这就所谓猫的生死纠缠态,也是所谓的薛定谔的猫. 当我们做需要 ...

  3. 前端学习笔记之CSS选择器

    阅读目录 一 基本选择器 二 后代选择器.子元素选择器 三 兄弟选择器 四 交集选择器与并集选择器 五 序列选择器 六 属性选择器 七 伪类选择器 八 伪元素选择器 九 CSS三大特性 一 基本选择器 ...

  4. 前端学习笔记之CSS网页布局

    CSS网页布局   阅读目录 一 网页布局方式 二 标准流 三 浮动流 四 定位流 一 网页布局方式 #1.什么是网页布局方式 布局可以理解为排版,我们所熟知的文本编辑类工具都有自己的排版方式,比如w ...

  5. 前端学习笔记之CSS属性设置

    CSS属性设置   阅读目录 一 字体属性 二 文本属性 三 背景属性 四 盒子模型 五 盒子模型各部分详解 一 字体属性 1.font-weight:文字粗细 取值 描述 normal 默认值,标准 ...

  6. 前端学习笔记之CSS知识汇总

    CSS介绍 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素. 当浏览器读到一个样式表,它就会按照这个样式表来对文档进行格式化(渲染). CSS语法 CSS实例 ...

  7. 前端学习笔记之css清除浮动float的七种常用方法总结和兼容性处理

    在清除浮动前我们要了解两个重要的定义: 浮动的定义:使元素脱离文档流,按照指定方向发生移动,遇到父级边界或者相邻的浮动元素停了下来. 高度塌陷:浮动元素父元素高度自适应(父元素不写高度时,子元素写了浮 ...

  8. 前端学习笔记之CSS过渡模块

    阅读目录 一 伪类选择器复习 二 过渡模块的基本使用 三 控制过渡的速度transition-timing-function 四 过渡模块连写 一 伪类选择器复习 注意点: #1 a标签的伪类选择器可 ...

  9. 前端学习笔记之CSS介绍

    阅读目录 一 什么是CSS 二 为何要用CSS 三 如何使用CSS 一 什么是CSS CSS全称Cascading Style Sheet层叠样式表,是专用用来为HTML标签添加样式的. 样式指的是H ...

随机推荐

  1. PHP-CGI 进程 CPU 100% 与 file_get_contents 函数的关系

    [文章作者:张宴 本文版本:v1.0 最后修改:2011.08.05 转载请注明原文链接:http://blog.s135.com/file_get_contents/] 有时候,运行 Nginx.P ...

  2. js里面进行位运算时候的注意事项

    &(按位与):两个操作数都是1就是1 任何数与1按位与的出来的都是其二进制最后一位:任何数与0按位与都是0|(按位或):两个操作数一个是1就是1 任何数与0按位或都是其本身^(按位异或):两个 ...

  3. Mybatis中的if test 标签

    <if test='patrolResult != null and patrolResult != "" and patrolResult !="1"' ...

  4. poj_3461 kmp

    题目大意 给定两个字符串S1, S2,求S1中包含多少个S2串.其中S1长度最大为 1000000, S2长度最大为10000. 题目分析 典型的字符串匹配问题,直接匹配显然会超时,考虑使用kmp算法 ...

  5. linux发布项目

    1.右击项目 export --->war file 上传到linux服务器 2.解压 jiar -xvf xx.war 3.移动到 tomcat webapps文件中 4.启动tomcat 访 ...

  6. JZOJ.5331【NOIP2017模拟8.23】壕游戏

    Description

  7. Windows Phone 几种弹出框提示方式

    首先,我们需要在网络上下载一个Coding4Fun 然后,引用  using Coding4Fun.Phone.Controls.Toolkit;                using Codin ...

  8. shell用curl抓取页面乱码，参考一下2方面（转）

    1.是用curl抓取的数据是用类似gzip压缩后的数据导致的乱码.乱码:curl www.1ting.com |more乱码:curl -H "Accept-Encoding: gzip&q ...

  9. [Haskell]解决hslua unknown symbol `___s trtod'的问题

    用cabal编译libpandoc时遇到这样的错误: HShslua-0.3.12.o: unknown symbol `___s trtod' ghc.exe: unable to load pac ...

  10. Linux下手工卸载11.2 RAC(非MOS的deinstall方法)

    思路来自于经典的<How to Proceed From a Failed 10g or 11.1 Oracle Clusterware (CRS) Installation (Doc ID 2 ...