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的 ...
随机推荐
- 洛谷P4151 最大XOR和路径 [WC2011] 线性基+图论
正解:线性基+图论 解题报告: 传送门 首先可以思考一下有意义的路径会是什么样子,,,那就一定是一条链+一些环 挺显然的因为一条路径原路返回有没有意义辣?所以一定是走一条链+一些环(当然也可以麻油环, ...
- Email实例
import java.util.Properties; import javax.activation.DataHandler; import javax.activation.DataSource ...
- 27-4-DMA2D图形加速器
在实际使用 LTDC 控制器控制液晶屏时,使 LTDC 正常工作后,往配置好的显存地址写入要显示的像素数据, LTDC 就会把这些数据从显存搬运到液晶面板进行显示,而显示数据的容量非常大,所以我们希望 ...
- rpm 安装软件包
RPM 是RedHat Package Manager (RedHat软件包管理工具)类似windows里面的“添加/删除程序”,rpm执行安装包 RPM执行安装.删除.更新 常用命令组合 -ivh: ...
- 【环境配置】配置jdk
版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/manoel/article/details/37736569 1. 下载jdk的安装文件 http: ...
- RN animated缩放动画
效果图: 代码: import React, {Component} from 'react'; import { AppRegistry, StyleSheet, Text, Animated, T ...
- 20180824 SSRS Line Chart 绘制
(很多时候我都会只记录遇到的问题点,很少详细的写整个过程) 1. 安装ReportBulider 客户端,不需要填写server url ,可以先放空,后面再维护. 安装包官网可以下载,是免费的,现在 ...
- Java面试总结（面试流程及核心面试题）
Java面试流程及核心面试题 面试整体流程 1.1 简单的自我介绍 我是xxxx,工作xxx年.我先后在xxxx公司.yyyy公司工作.先后做个xxxx项目.yyyy项目. 1.2 你简单介 ...
- 浅谈JS的变量提升
JS的解析机制,是JS的又一大重点知识点,在面试题中更经常出现,今天就来唠唠他们的原理.首先呢,我们在我们伟大的浏览器中,有个叫做JS解析器的东西,它专门用来读取JS,执行JS.一般情况是存在作用域就 ...
- 015-线程同步-synchronized几种加锁方式、Java对象头和Monitor、Mutex Lock、JDK1.6对synchronized锁的优化实现
一.synchronized概述基本使用 为确保共享变量不会出现并发问题,通常会对修改共享变量的代码块用synchronized加锁,确保同一时刻只有一个线程在修改共享变量,从而避免并发问题. syn ...