web CSS的知识- 关于后代选择器,子选择器,兄弟选择器的使用
1. 后代选择器
官方解释:后代选择器可以选择作为某元素后代的元素。
理解:选择某一标签的后代中,所有的此标签标记
例:ul em {color:red;}
就是选择,h1标签后代中中,所有的em。
代码如下:
如果选择器写作 ul em,这个语法就会选择从 ul 元素继承的所有 em 元素,而不论 em 的嵌套层次多深。
红色标签就是受影响的标签
<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>
2.子选择器
官方解释:与后代选择器相比,子元素选择器(Child selectors)只能选择作为某元素子元素的元素。
理解:选择的元素,必须是直系儿子元素,之间不能有间隔
例:h1 > strong {color:red;}
就是选择,h1的直系儿子中<strong>标签
红色标签就是受影响的标签
<h1>This is <strong>very</strong> <strong>very</strong> important.</h1>
<h1>This is <em>really <strong>very</strong></em> important.</h1>
第二个<strong>不会变,是因为,第二个<string>不是<h1>的子元素,只是后代元素
3.相邻兄弟选择器
官方解释:可选择紧接在另一元素后的元素,且二者有相同父元素。
理解:选择的是两个紧紧相邻的元素,而且两个元素必须有相同的父元素
例:h1 + p {margin-top:50px;}
选择的是p必须紧跟h1元素后面,而且两个有相同的父元素的两个元素
请看下面这个文档树片段:
红色标签就是受影响的标签
<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>
在上面的片段中,div 元素中包含两个列表:一个无序列表,一个有序列表,每个列表都包含三个列表项。这两个列表是相邻兄弟,列表项本身也是相邻兄弟。不过,第一个列表中的列表项与第二个列表中的列表项不是相邻兄弟,因为这两组列表项不属于同一父元素(最多只能算堂兄弟)。
请记住,用一个结合符只能选择两个相邻兄弟中的第二个元素。请看下面的选择器:
li + li {font-weight:bold;}
注意:在遇到,这样三个或者是多个元素相邻的,兄弟选择器会选择第二个和第三个。
web CSS的知识- 关于后代选择器,子选择器,兄弟选择器的使用的更多相关文章
- CSS后代选择器、子元素选择器、相邻兄弟选择器区别与详解
派生选择器用的很多,派生选择器具体包括为后代选择器.子元素选择器.相邻兄弟选择器,我们来理解一下他们之间的具体用法与区别. 1.css后代选择器语法:h1 em {color:red;} 表示的是从h ...
- 前端学习笔记之CSS后代选择器、子元素选择器、相邻兄弟选择器区别与详解
派生选择器用的很多,派生选择器具体包括为后代选择器.子元素选择器.相邻兄弟选择器,我们来理解一下他们之间的具体用法与区别. 1.css后代选择器语法:h1 em {color:red;} 表示的是从h ...
- CSS后代选择器,子选择器和相邻兄弟选择器
平时在代码练习中,经常用到后代选择器,子选择器也会用到,这里做个总结: 1,后代选择器和子选择器区别: ①写法不一样:后代选择器的标识为:空格 如:ul li{width:150px;} [ul和li ...
- CSS系列之后代选择器、子选择器和相邻兄弟选择器
后代选择器比子选择器的范围大,包含子选择器,且包含子选择器的“子孙”选择器,后代选择器使用"空格"符号间隔选择器 子选择器:子选择器只是父选择器的一级子元素,使用"> ...
- jQuery选择器(子元素过滤选择器)第七节
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/stri ...
- css选择器(常规选择器,伪类选择器,伪元素选择器,根元素选择器)
前言 CSS的一个核心特性是能向文档中的一组元素类型应用某些规则,本文将详细介绍CSS选择器 选择器 [通配选择器] 星号*代表通配选择器,可以与任何元素匹配 *{color: red;} [元素选择 ...
- css兄弟选择器,+ ~选择器的区别
壹 ❀ 引 实习生在写搜索框下拉提示时,遇到了不知道怎么解决的问题,所以来问我.效果不难,鼠标选中输入框(focus)时,展示搜索关键字相关提示,看了眼dom结构是这样的: 在她的理解里面,选中父元 ...
- CSS选择器之兄弟选择器(~和+)
今天在改以以前人家写的网页的样式的时候,碰到这个选择器,‘~’,当时我是懵逼的,傻傻分不清 ‘+’ 跟 ‘~’的区别,虽然我知道他们都是兄弟选择器. 后来网上查了下,也许是我查找的方式不对,没有找到我 ...
- CSS3 选择器——笔记+实战案例(基本选择器、组合选择器、属性选择器、伪类选择器)
使用CSS3 选择器——笔记 CSS通过选择器控制HTML元素,CSS选择器对网页对象可以实现一对一.一对多或者多对一的匹配. 一.CSS3选择器分类 CSS选择器在CSS2.1选择器的基础上新增了属 ...
随机推荐
- CTF入门指南
转自http://www.cnblogs.com/christychang/p/6032532.html ctf入门指南 如何入门?如何组队? capture the flag 夺旗比赛 类型: We ...
- 关于sleep()和interrupt()及主线程和线程
看代码 public class TestSleep { public static void main(String args[]) throws InterruptedException{ Thr ...
- delete和delete[]
c++中对new申请的内存的释放方式有delete和delete[两种方式,到底这两者有什么区别呢? 1.我们通常从教科书上看到这样的说明:delete 释放new分配的单个对象指针指向的内存dele ...
- Easy单例模式
在学习单例模式前,不妨问自己几个问题:单例模式是怎么来的,单例模式怎么去用? 单例模式是怎么来的? 这就从设计模式起源开始,他是在实际实践中遇到类似情况可以通用经验所得到的总结,一般在其他模块或者方法 ...
- 学习ui-router
ui-router的学习 在单页面应用中要把各个分散的视图给组织起来是通过路由机制来实现的.Angular原始的路由机制靠ngRoute提供,通过hash和history来实现的,可以检测浏览器是否支 ...
- Spring DM所提供的Bundle监听接口OsgiBundleApplicationContextListener
通过使用Spring DM提供的监听接口,我们可以更好的对服务进行管控,其实该接口也非常简单就能使用上,只要自定义一个类实现OsgiBundleApplicationContextListener接口 ...
- MASMPlus编译出错:error LNK2001: unresolved external symbol _WinMainCRTStartup
初学汇编,感觉很多不懂.不过那也是,如果懂了的话就不用学了,从无到有学习一门编程语言果然不是那么容易的一件事. 学习汇编总得要有一款汇编软件才行,没理由只是使用Windows自带的DEBUG.于是上了 ...
- 测试工作中ADB命令实战
作者:TT,<测试架构师>微信公众号作者 大家能点击进来,说明还是对ADB有所了解或听说过的,可能也会比较熟练的掌握了这些命令,下面描述如有不对的地方,欢迎指正和交流学习,请多指教! 一. ...
- Zigbee折腾之旅:(一)CC2530最小系统
最近在倒腾Zigbee,准备参加物联网全国大赛,学校有给我们发Zigbee开发板,但是对于喜欢折腾的我来说,用开发板还是不过瘾,起码也得知道怎么去画一块板子.于是乎,在百度一番后就有了下面这篇文章. ...
- Linux下软件设成系统服务运行
将软件的启动脚本copy到/etc/init.d/soft_name chmod 777 soft_name 设置服务开机启动 chkconfig soft_name ...