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的 ...
随机推荐
- spring根据name或者id获取实例
@Resource(name="beanname") private ClassType scheduler; 其中ClassType需要跟实例的类型对应上.
- input="file" 浏览时只显示指定excel文件，筛选特定文件类型
<p>显示 .xls, .xlsx, .csv 文件...</p> <input type="file" accept=".csv, app ...
- MySql left join 多表连接查询优化语句
先过滤条件然后再根据表连接 同时在表中建立相关查询字段的索引这样在大数据多表联合查询的情况下速度相当快 创建索引: create index ix_register_year ON dbo.selec ...
- blockdev命令 blkid命令 lsblk命令
blockdev命令 blkid命令 lsblk命令 http://www.jb51.net/LINUXjishu/310389.html block相关的命令 这篇文章主要介绍了Linux bl ...
- what's the 套期保值
出自 MBA智库百科(https://wiki.mbalib.com/) 什么是套期保值 套期保值是指把期货市场当作转移价格风险的场所,利用期货合约作为将来在现货市场上买卖商品的临时替代物,对其现在买 ...
- cxPivotGrid导出数据
导出数据,需要在uses区域引用cxExportPivotGridLink 根据导出类型使用以下过程 procedure cxExportPivotGridToHTML procedure cxExp ...
- vue中根据当前时间进行排序
computed: { newdataList: function() { return this.sortKey(this.dataList, "addtime"); } }, ...
- axios封装异步获取数据的函数以及全局拦截
https://www.cnblogs.com/momozjm/p/7273272.html https://www.jianshu.com/p/9a1b99cd2ba6
- JsonResponse返回中文乱码问题
class Publish(APIView): def get(self, request): publish_list = models.Publish.objects.all() bs = MyS ...
- es6 数组..... ==和===的区别 es6的递归方式 es6find函数 timer setTimeout v-html的用法，-
相当于push了 find函数来找到某个值 如果新建一个 setTimeout 的timer 首先得清除这个timer. v-html用法之一就是加载后台传过来的模板