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的 ...
随机推荐
- 12.2RAC搭建记录
12.2RAC环境搭建记录 安装前资源检查 资源限制要求/etc/security/limits.conf Table 6-1 Installation Owner Resource Limit Re ...
- elasticsearch 出现“java.lang.OutOfMemoryError: Java heap space”
默认情况下,Elasticsearch JVM默认使用最小和最大大小为2 GB的堆.迁移到生产环境时,配置堆大小以确保Elasticsearch堆足够的大很重要的. Elasticsearch将通过X ...
- 洛谷 P3684 机棚障碍Hangar Hurdles [CERC2016] 图论
正解: 解题报告: 传送门! 首先不难想到这题主要有两个问题需要解决,一个是预处理出各个点的箱子半径最大值,一个是求ans 然后分别港下QwQ 首先关于预处理要说下昂 预处理有三种方法,分别港下 第一 ...
- VB改写C#
1.VB的Val()函数 先从程序集中引入Microsoft.VisualBasic命名空间.不过,即便是引入了Microsoft.VisualBasic命名空间,还是不能直接使用像Val()这样的函 ...
- finecms如何控制调用子栏目的数量
finecms如何控制调用子栏目的数量?比如只要调用栏目id为23下的3个子栏目要怎么写?我们把num=3放后面不能实现,放在return前面就可以了,原来是顺序的问题,return只能放最后 {li ...
- ACM-最短路之中的一个个人的旅行——hdu2066
版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/lx417147512/article/details/27235809 ************** ...
- 并发编程---IO模型
IO模型 任务的提交方式有两种: 同步:应用程序提交完任务,等待结果结果,之后在执行下一个任务 异步:应用程序提交完任务,继续执行不等待结果,任务执行完,会自动出发异步中的会带哦函数 同步不等于阻塞: ...
- 多线程下的单例-double check
话不多说直接上代码: public sealed class Singleton { private static Singleton _instance = null; // Creates an ...
- eclipse快键
工作中经常用到的几个eclipse快捷键 ctrl+alt+箭头下或上-----------------复制当前行 ctrl+q -------------让光标返回最后一次修改的地方 ctrl+d ...
- 算法笔记-PHP实现队列的操作
[队列]先进者先出,这就是典型的“队列”. 最基本的两个操作:入队enqueue(),放一个数据到队列尾部:出队dequeue(),从队列头部取一个元素.队列可以用数组或者链表实现,用 ...