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

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. NSFileManager和NSFileHandle（附：获取文件大小 ）

    本文转载至:http://www.cnblogs.com/pengyingh/articles/2350345.html 天牛 感谢原创作者的硕果 //file 文件操作 NSFileManager  ...

  2. 元素设置disabled属性后便无法向后台传值

    元素设置disabled属性后便无法向后台传值

  3. BluePrint和ORM

    一.蓝图创建 #引入库文件 from flask import Blueprint,request,jsonify user = Blueprint( "site", __name ...

  4. 【node】---socket---网络通信---【巷子】

    1.什么是一个socket? 网络上两个程序通过一个双向的通信连接实现数据交换,这个连接的一端称为socket 2.http与socket的区别 在以前我们实现数据交换已经有了HTTP协议,为什么还要 ...

  5. [ASP.NET 大牛之路]03 - C#高级知识点概要(2) - 线程和并发

    目录: 1.线程简单使用 2.并发和异步的区别 3.并发控制—锁 4.线程的通信机制 5.线程池中的线程 6.案例:支持并发的异步日志组件 7.结束 1.线程的简单使用---------------- ...

  6. SQL的子查询操作

    对于表中的每一个记录,我们有时候需要提取特殊的或者你需要的记录,要提前做一个表的筛选,之后再对你选出的记录做一个修改,此时你必须使用SQL的子查询操作.如:修改id=5的记录的strContent字段 ...

  7. 转！！spring @component 详解 默认初始化bean的名字 VNumberTask类 就是 VNumberTask

    参考链接:信息来源 今天碰到一个问题,写了一个@Service的bean,类名大致为:CUser xml配置: <context:component-scan base-package=&quo ...

  8. Web开发者应知的URL编码知识（转）

    原文出处: lunatech   译文出处:oschina - 桔子, lwei, 史涛, Khiyuan, super0555, LinuxQueen, 抛出异常的爱 本文首先阐述了人们关于统一资源 ...

  9. 简单的共享文件http

    如果你急需一个简单的Web Server,但你又不想去下载并安装那些复杂的HTTP服务程序,比如:Apache,ISS等.那么, Python 可能帮助你.使用Python可以完成一个简单的内建 HT ...

  10. go-005-变量、常量

    概述 变量来源于数学,是计算机语言中能储存计算结果或能表示值抽象概念.变量可以通过变量名访问. Go 语言变量名由字母.数字.下划线组成,其中首个字母不能为数字. 声明变量的一般形式是使用 var 关 ...