前端学习笔记之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后代选择器、子元素选择器、相邻兄弟选择器区别与详解的更多相关文章
- 2、前端学习笔记之——css
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 【学习笔记】薛定谔的喵咪Cat—球盒问题（全详解）
[学习笔记]薛定谔的喵咪Cat-球盒问题(全详解) [题目描述] 当一个猫在盒子里时,因为放射物的状态我们不知道,所以猫的状态我们也不知道,这就所谓猫的生死纠缠态,也是所谓的薛定谔的猫. 当我们做需要 ...
- 前端学习笔记之CSS选择器
阅读目录 一 基本选择器 二 后代选择器.子元素选择器 三 兄弟选择器 四 交集选择器与并集选择器 五 序列选择器 六 属性选择器 七 伪类选择器 八 伪元素选择器 九 CSS三大特性 一 基本选择器 ...
- 前端学习笔记之CSS网页布局
CSS网页布局 阅读目录 一 网页布局方式 二 标准流 三 浮动流 四 定位流 一 网页布局方式 #1.什么是网页布局方式 布局可以理解为排版,我们所熟知的文本编辑类工具都有自己的排版方式,比如w ...
- 前端学习笔记之CSS属性设置
CSS属性设置 阅读目录 一 字体属性 二 文本属性 三 背景属性 四 盒子模型 五 盒子模型各部分详解 一 字体属性 1.font-weight:文字粗细 取值 描述 normal 默认值,标准 ...
- 前端学习笔记之CSS知识汇总
CSS介绍 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素. 当浏览器读到一个样式表,它就会按照这个样式表来对文档进行格式化(渲染). CSS语法 CSS实例 ...
- 前端学习笔记之css清除浮动float的七种常用方法总结和兼容性处理
在清除浮动前我们要了解两个重要的定义: 浮动的定义:使元素脱离文档流,按照指定方向发生移动,遇到父级边界或者相邻的浮动元素停了下来. 高度塌陷:浮动元素父元素高度自适应(父元素不写高度时,子元素写了浮 ...
- 前端学习笔记之CSS过渡模块
阅读目录 一 伪类选择器复习 二 过渡模块的基本使用 三 控制过渡的速度transition-timing-function 四 过渡模块连写 一 伪类选择器复习 注意点: #1 a标签的伪类选择器可 ...
- 前端学习笔记之CSS介绍
阅读目录 一 什么是CSS 二 为何要用CSS 三 如何使用CSS 一 什么是CSS CSS全称Cascading Style Sheet层叠样式表,是专用用来为HTML标签添加样式的. 样式指的是H ...
随机推荐
- dz数据结构
pre_common_admincp_cmenu 后台 首页 | 常用操作管理数据表 字段名 数据类型 默认值 允许非空 自动递增 备注 id smallint(6) unsigned NO 是 ...
- Django学习笔记 创建应用
django中使用应用来分割功能.比如:做一个游戏网站,包含4块不同的功能:游戏新闻.游戏论坛.Blog系统.在线商城.使得结构清晰了,每一个应用实现不同的功能:便于复用:游戏新闻.游戏论坛.Blog ...
- JS选中清空
var inputArray = document.getElementsByTagName("input"); var strArray = []; ; i < input ...
- poj_3987 Trie图
题目大意 有N个病毒,病毒由A-Z字母构成,N个病毒各不相同.给出一段程序P,由A-Z字母构成,若病毒在在程序P或者P的逆转字符串P'中存在,则该程序P被该病毒感染.求出程序P被多少种病毒感染. 题目 ...
- redis基础----->redis的基本使用（一）
这里我们就在虚拟机中安装redis,并且使用java和python实现简单的操作.深情是我承担不起的重担,情话只是偶尔兑现的谎言. redis的使用 下载地址:https://redis.io/.安装 ...
- LeetCode——Happy Number
Description: Write an algorithm to determine if a number is "happy". A happy number is a n ...
- window自带字体
一.在默认情况下, Windows 默认提供下列字体: Windows 95/98/98SE 宋体.黑体.楷体_GB2312.仿宋_GB2312 Windows XP/2000/2003/ME/NT ...
- 2015.10.11（js判断鼠标进入容器的方向）
判断鼠标进入容器的方向 1.前几天在万圣节专题项目中用到了鼠标坐标page事件,随着鼠标背景图片移动形成有层次感的效果,但page事件在IE低版本不支持,所以还要做兼容.在研究page事件同时无意中想 ...
- java类的成员变量和局部变量的区别
转自:https://jingyan.baidu.com/article/03b2f78c1ba2d05ea237ae9b.html 在类中位置不同:成员变量:在类中方法外.局部变量:在方法定义中或者 ...
- Tomcat部署静态网站
公司架构:公司架构有5套,主机都是阿里云的ecs,基本上都是SLB做前端负载均衡,后端Tomcat,后接RDS数据库. 业务需求:需要将公司现有网站指向一个二级域名,建立一个新的静态网站,将域名指向现 ...