CSS后代选择器、子元素选择器、相邻兄弟选择器区别与详解
派生选择器用的很多，派生选择器具体包括为后代选择器、子元素选择器、相邻兄弟选择器，我们来理解一下他们之间的具体用法与区别。
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后代选择器、子元素选择器、相邻兄弟选择器区别与详解的更多相关文章
- 前端学习笔记之CSS后代选择器、子元素选择器、相邻兄弟选择器区别与详解
派生选择器用的很多,派生选择器具体包括为后代选择器.子元素选择器.相邻兄弟选择器,我们来理解一下他们之间的具体用法与区别. 1.css后代选择器语法:h1 em {color:red;} 表示的是从h ...
- CSS系列之后代选择器、子选择器和相邻兄弟选择器
后代选择器比子选择器的范围大,包含子选择器,且包含子选择器的“子孙”选择器,后代选择器使用"空格"符号间隔选择器 子选择器:子选择器只是父选择器的一级子元素,使用"> ...
- jQuery中的层级选择器（四、二）：后代元素、子元素、相邻元素、兄弟元素
<!DOCTYPE html> <html> <head> <title>层次选择器</title> <meta http-equiv ...
- CSS后代选择器,子选择器和相邻兄弟选择器
平时在代码练习中,经常用到后代选择器,子选择器也会用到,这里做个总结: 1,后代选择器和子选择器区别: ①写法不一样:后代选择器的标识为:空格 如:ul li{width:150px;} [ul和li ...
- css选择器 兄弟选择器 相邻兄弟选择器 子元素选择器
1.兄弟选择器: ~ 该选择器会选择当前元素之后的所有相邻指定元素(具有相同父元素的兄弟元素): .p ~ li{ color: blue; } <div> <p class=&qu ...
- CSS 相邻兄弟选择器
相邻兄弟选择器(Adjacent sibling selector)可选择紧接在另一元素后的元素,且二者有相同父元素. 选择相邻兄弟 如果需要选择紧接在另一个元素后的元素,而且二者有相同的父元素,可以 ...
- 理解css相邻兄弟选择器
今天在菜鸟教程看到了css组合选择符的“相邻兄弟选择器”,刚开始对这个概念有些不太理解,通过查阅资料并且经过一些试验总算有了些头绪. 原文解释是“相邻兄弟选择器(Adjacent sibling se ...
- CSS相邻兄弟选择器
相邻兄弟选择器定义:选择紧接在另一个元素后的元素,而且两者有着相同的父元素. 代码一:<body> <h1>This is a heading.</h1> < ...
- weex中css不能使用子元素选择器
weex中css不能使用子元素选择器 刚入手可能会有错误,有误导地方请谅解,不过都是亲身踩坑
随机推荐
- 内功心法 -- java.util.ArrayList<E> (3)
写在前面的话:读书破万卷,编码如有神--------------------------------------------------------------------下文主要对java.util ...
- C#操作XML方式
前言 前一篇XML读取,现在咱们继续XML操作相关 C#中也有三种操作(增.删.改.查)XML文件方法如下: 使用 XmlDocument(DOM模式) 使用 XmlTextWriter(流模式) 使 ...
- Android名片扫描识别系统SDK
Android名片扫描识别系统SDK 一.Android名片扫描识别系统应用背景 这些年,随着移动互联的发展,APP应用成爆发式的增长,在很多APP中都涉及到对名片信息的录入,如移动CRM.移动端OA ...
- PHP面向对象——GD库实现图片水印和缩略图
今天的实现目标就是使用GD库完成对图片加水印和图 片缩略图两个功能 动身前逻辑准备 属性: 路径 功能: 构造方法 生成水印的方法 获取 图片信息 获取位置信息(123 456 789) 创建图片资源 ...
- block之---内存管理
首先简单说下MRC和ARC MRC: 手动管理内存,需要自己去释放内存, 如果对象的引用计数器为0时对象就会被释放. 属性修饰策略:assign, retain, copy ARC: ARC是编译器特 ...
- C语言memset学习
#include <stdio.h> #include <memory.h> ]); //函数声明 void main(){ ]={{,,},{,,},{,,},{,,}};/ ...
- CI Weekly #14 | 如何搭建合适的持续交付开发流程？
时隔 10 个月,flow.ci 开始正式收费上线.为感谢对我们的内测支持,所有内测用户可继续免费使用基础版 30 天,截止至 3 月 15 日失效.欢迎随时告诉我们你对收费版 flow.ci 的反馈 ...
- Python之文件与目录操作及压缩模块（os、shutil、zipfile、tarfile）
Python中可以用于对文件和目录进行操作的内置模块包括: 模块/函数名称 功能描述 open()函数 文件读取或写入 os.path模块 文件路径操作 os模块 文件和目录简单操作 zipfile模 ...
- Linux下SVN服务器搭建配置
Linux下SVN服务器搭建配置 1.SVN服务安装 yum install subversion 2.创建SVN代码仓库 mkdir /data/svn svnadmin create /data/ ...
- 学习笔记——Java字符串操作常用方法
1.创建字符串 最常用的是使用String类的构造方法:String s=new String("abcd"); 也可采用J2SE5.0添加的StringBuilder类的字符串构 ...