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

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. 前端学习笔记之CSS后代选择器、子元素选择器、相邻兄弟选择器区别与详解

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

  2. CSS系列之后代选择器、子选择器和相邻兄弟选择器

    后代选择器比子选择器的范围大,包含子选择器,且包含子选择器的“子孙”选择器,后代选择器使用"空格"符号间隔选择器 子选择器:子选择器只是父选择器的一级子元素,使用"> ...

  3. jQuery中的层级选择器（四、二）：后代元素、子元素、相邻元素、兄弟元素

    <!DOCTYPE html> <html> <head> <title>层次选择器</title> <meta http-equiv ...

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

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

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

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

  6. CSS 相邻兄弟选择器

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

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

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

  8. CSS相邻兄弟选择器

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

  9. weex中css不能使用子元素选择器

    weex中css不能使用子元素选择器 刚入手可能会有错误,有误导地方请谅解,不过都是亲身踩坑

随机推荐

  1. Hadoop权威指南:HDFS-Hadoop存档

    Hadoop权威指南:HDFS-Hadoop存档 [TOC] 每个文件按块方式存储, 每个块的元数据存储在namenode的内存中 Hadoop存档文件或HAR文件是一个更高效的文件存档工具,它将文件 ...

  2. Java文件中为什么只能有一个public修饰的类, 并且类名还必须与文件名相同

    当编写一个java源代码文件时,此文件通常被称为编译单元(有时也被称为转译单元).每个编译单元都必须有一个后缀名.java,而在编译单元内则可以有一个public类,该类的名称必须与文件的名称相同(包 ...

  3. class path resource [config.xml] cannot be opened because it does not exist

    初学Spring在用Resource rs=new ClassPathResource("applicationContext.xml");时老是遇到这个错误.后来发现用Appli ...

  4. 用jdk在cmd下运行编译java程序

    1.首先通过创建一个txt文档,将java代码写入txt文档中保存 2.将保存好的HelloWorld.txt文档重命名为HelloWorld.java文件. 3.打开windows中的"命 ...

  5. 遍历hashMap对效率的影响

    测试环境:jdk1.7.0_79\Processor 1.7 GHz Intel Core i5 遍历Map的方式有很多,通常场景下我们需要的是遍历Map中的Key和Value. 写了两个方法: pu ...

  6. css特殊字符编码

  7. SpringBoot实践 - SpringBoot+mysql

    关于springBoot是个神马东西以及优缺点,请自行搜索了解. LZ看到很多关于SpringBoot的Demo,单看一篇总是没法整合SpringBoot与Mysql.没法子,还是自己操刀来一发为妙. ...

  8. RadAsm使用

    RadASM 命令行语法 DelCheck,Out,Command,F1[,F2[,Fx]]   DelCheck   执行命令前要清除的文件,不使用时设为0  Out      一般指定为O,所有信 ...

  9. git链接GitHub命令及基本操作

    Git是一款不错的代码管理工具,下面引用百科的一段话:  Git是用于Linux内核开发的版本控制工具.与CVS.Subversion一类的集中式版本控制工具不同,它采用了分布式版本库的作法,不需要服 ...

  10. Xamarin组件包 Xamarin.ToolKit第二波

    Xamarin.ToolKit第二波 一 圆角按钮 xamarin.froms提供的标准button按钮设置了圆角和边框,都没有明显圆角样式,于是乎自己重写了渲染类.道理吧就是重写ButtonRend ...