CSS选择符-----关系选择符
包含选择符（E F）
选择所有被E元素包含的F元素
- 与 子选择符(E>F) 不同的是，包含选择符将会命中所有符合条件的后代，包括儿子，孙子，孙子的孙子...
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#firstdiv p{
color: #0000FF;
font-weight: bold;
}
</style>
</head>
<body>
<div id="firstdiv">
<p>第一个段落。</p>
<p>第二个段落。</p>
<ul>
<li>Java</li>
<li>C#</li>
</ul>
<div>
<p>第三个段落。</p>
</div>
</div>
</body>
</html>
子选择符（E>F）
选择所有作为E元素的子元素F
- 与 包含选择符(E F) 不同的是，子选择符只能命中子元素，而不能命中孙辈
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#firstdiv>p{
color: #0000FF;
font-weight: bold;
}
</style>
</head>
<body>
<div id="firstdiv">
<p>第一个段落。</p>
<p>第二个段落。</p>
<ul>
<li>Java</li>
<li>C#</li>
</ul>
<div>
<p>第三个段落。</p>
</div>
</div>
</body>
</html>
相邻选择符（E+F）
选择紧贴在E元素之后F元素，元素E与F必须同属一个父级
- 与 兄弟选择符(E~F) 相同的是，相邻选择符也是选择同级的元素F；不同的是，相邻选择符只会命中符合条件的那个毗邻的兄弟元素（即紧挨着E元素之后的第一个F元素）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
ul+div{
color: #0000FF;
font-weight: bold;
}
</style>
</head>
<body>
<div id="firstdiv">
<p>第一个段落。</p>
<p>第二个段落。</p>
<ul>
<li>Java</li>
<li>C#</li>
</ul>
<div>
<p>第三个段落。</p>
</div>
<div>
<p>第四个段落。</p>
</div>
</div>
</body>
</html>
兄弟选择符（E~F）
选择E元素后面的所有兄弟元素F，元素E与F必须同属一个父级
- 需要注意的是，选择的只是同级的元素F，后代中的元素F不会被选择
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
ul~div{
color: #0000FF;
font-weight: bold;
}
</style>
</head>
<body>
<div id="firstdiv">
<p>第一个段落。</p>
<p>第二个段落。</p>
<ul>
<li>Java</li>
<li>C#</li>
</ul>
<div>
<p>第三个段落。</p>
</div>
<div>
<p>第四个段落。</p>
</div>
</div>
</body>
</html>
CSS选择符-----关系选择符的更多相关文章
- CSS选择符详解之关系选择符篇
原文:http://www.chinaz.com/web/2012/1017/278553.shtml 相信大家都对CSS选择符都不陌生,选择符包含:元素选择符.关系选择符.属性选择符.伪类选择符.伪 ...
- css关系选择符
<!Doctype html> <html> <head> <meta http-equiv="Content-Type" content ...
- CSS基础篇之选择符
关系选择符 E F 包含选择符(Descendant combinator) CSS1 选择所有被E元素包含的F元素. <html> <head> <meta chars ...
- CSS选择符-----元素选择符
通配选择符(*) 选定所有对象 通配选择符(Universal Selector) 通常不建议使用通配选择符,因为它会遍历并命中文档中所有的元素,出于性能考虑,需酌情使用 & ...
- CSS全览_选择符+特指+单位+字体
CSS全览_选择符+特指+单位+字体 目录 CSS全览_选择符+特指+单位+字体 1. CSS样式 2. 选择符 3. 特指度和层叠 4. 值和单位 5. 字体 作者: https://www.cnb ...
- CSS基础篇之选择符2
属性选择符: 选择符 版本 描述 E[att] CSS2 选择具有att属性的E元素. E[att="val"] CSS2 选择具有att属性且属性值等于val的E元素. E[at ...
- .NET 基础 一步步 一幕幕[运算符、占位符、转义符]
运算符.占位符.转义符 好吧,在五局全胜之后,终于升到了三个钻,距离一个星星还有一大段距离,忽然想起来今天的博客还没写,果断坑队友,来写博客了....感觉以后还是每天更新一篇比较好.要不晚上就该熬 ...
- CSS中的关系选择器
关系选择器是指根据与其他元素的关系选择元素的选择器,常见的符号有空格.>.~,还 有+等,这些都是非常常用的选择器. 后代选择器:选择所有合乎规则的后代元素.空格连接. 相邻后代选择器:仅仅选择 ...
- （转载）SQL去除回车符，换行符，空格和水平制表符
http://www.cnblogs.com/insus/p/4815336.html MS SQL去除回车符,换行符,空格和水平制表符,参考下面语句,一般情况是SQL接受富文本或是textarea的 ...
随机推荐
- scala-高阶函数
//1类似于lambda表达式的函数直接量====================== var get = (name: String) => { println(123 + name) } g ...
- Python内置模块:random,os,sys,和加密模块hashlib
random import random # 导入模块 随机数 import random # 内置的 print(random.random()) #0-1 之间随机小数(18位有效数字) p ...
- 7620N路由器刷openwrt系统并配置***
之前一直用goAgent***,主要用gmail.逛逛twitter.youtube.维基百科.加速stackoverflow等等.但goAgent只能PC使用,手机.iPad都不能用,直到我拿到了一 ...
- fio 测试 磁盘I/O: ls -1 /sys/block/sda/queue/ | awk '{cmd="cat "i$0; print i$0; system(cmd) }' i=`pwd`'/'
小型计算机系统接口(SCSI,Small Computer System Interface) SAS(Serial Attached SCSI,串列SCSI) SCSI 硬盘名称: sd[a-p] ...
- WebSocket 的鉴权授权方案
引子 WebSocket 是个好东西,为我们提供了便捷且实时的通讯能力.然而,对于 WebSocket 客户端的鉴权,协议的 RFC 是这么说的: This protocol doesn’t pres ...
- java装配bean
java装配bean,可以自动装配,也可以显式装配: 1.通过组件扫描自动装配bean 因为使用了Configuration注解,表明这个类是一个配置类,该类应该包含在spring应用上下文如何创建b ...
- ios禁止页面下拉
document.querySelector('body').addEventListener('touchmove', function(e) { e.preventDefault(); } ...
- [Android][Android Studio] Gradle项目中加入JNI生成文件(.so文件)
版权声明:本文作者:Qiujuer https://github.com/qiujuer; 转载请注明出处,盗版必究! ! ! https://blog.csdn.net/qiujuer/articl ...
- Linksys E 刷Tomato shibby
前言 一直以来都用Linksys的无线路由器~因为它的稳定~多年来一直用Linksys自身的固件~因为之前没用它做什么特别的应用~所以一直用了下来~它的原厂固件的稳定性也从没让我操过心~近来要为用户提 ...
- 由swap引发的关于按值传递和引用传递的思考与总结
函数的参数传递定义:在调用一个函数时,将实参传递给形参. C++中函数的参数传递有按值传递.地址传递和引用传递3种方式.注意:地址也是一种值,按值传递和按地址传递都是单向的值传递方式,即形参都不会回传 ...