css中“~”

element1~element2 选择器匹配出现在element1后面的element2。
element1和element2这两种元素必须具有相同的父元素，但element2不必紧跟在element1的后面。

如：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
</head>
<style>
    p~ul { background: #00ccff; }
</style>
<body>
<p>测试~</p>
<ul><li>a</li><li>b</li></ul>
<ul><li>1</li><li>2</li></ul>
</body>
</html>

结果：

element,element
div,p
选择所有<div>元素和<p>元素

element element
div p
选择<div>元素内的所有<p>元素

element>element
div>p
选择所有父级是 <div> 元素的 <p> 元素，（只选择第一代）

element+element
div+p
选择所有紧接着<div>元素之后的<p>元素

css中“>”

css3特有的选择器，A>B 表示选择A元素的所有子B元素。与A B的区别在于，A B选择所有后代元素，而A>B只选择一代。

.a，.b｛逗号指相同的css样式｝

.a .b｛空格指所有后代元素｝

.a>.b｛大于号指子代元素｝

css中"."，","，“~”和“>”符号的意义的更多相关文章

bootstrap栅栏系统css中的col-xs-*、col-sm-*、col-md-* 的意义以及 bootstrap一个标签中，同时有 col-xs , col-sm , col-md , col-lg的理解
摘要: bootstrap栅栏系统css中的col-xs-*.col-sm-*.col-md-* 的意义: .col-xs- 超小屏幕手机 (<768px) .col-sm- 小屏幕平板 ( ...
可视化Tensorboard图中的符号意义
可视化Tensorboard图中的符号意义
C++中弱符号（弱引用）的意义及实例
今天读别人代码时看到一个“#pragma weak”,一时没明白,上网研究了一个下午终于稍微了解了一点C.C++中的“弱符号”,下面是我的理解,不正确的地方望大家指正. 本文主要从下面三个方面讲“弱符 ...
浅析CSS中的BFC和IFC
1. 为什么会有BFC和IFC 首先要先了解两个概念:Box和formatting context: Box:CSS渲染的时候是以Box作为渲染的基本单位.Box的类型由元素的类型和display属性 ...
CSS中不为人知Zoom属性的使用介绍(IE私有属性)
其实Zoom属性是IE浏览器的专有属性,Firefox等浏览器不支持.它可以设置或检索对象的缩放比例.除此之外,它还有其他一些小作用,比如触发ie的hasLayout属性,清除浮动.清除margin的 ...
CSS中的class与id区别及用法
转自http://www.divcss5.com/rumen/r3.shtml及http://www.jb51.net/css/35927.html 我们平常在用DIV CSS制作Xhtml网页页面时 ...
深入理解CSS中的层叠上下文和层叠顺序(转)
by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxinxu.com/wordpress/?p=5115 零.世间的道 ...
CSS中的ul与li样式详解
CSS中的ul与li样式详解ul和li列表是使用CSS布局页面时常用的元素.在CSS中,有专门控制列表表现的属性,常用的有list-style-type属性.list-style-image属性.li ...
深入理解CSS中的层叠上下文和层叠顺序
零.世间的道理都是想通的在这个世界上,凡事都有个先后顺序,凡物都有个论资排辈.比方说食堂排队打饭,对吧,讲求先到先得,总不可能一拥而上.再比如说话语权,老婆的话永远是对的,领导的话永远是对的. 在C ...

随机推荐

最大熵马尔科夫模型（MEMM）及其标签偏置问题
定义: MEMM是这样的一个概率模型,即在给定的观察状态和前一状态的条件下,出现当前状态的概率. Ø S表示状态的有限集合 Ø O表示观察序列集合 Ø Pr(s|s’,o):观察和状态转移概 ...
python+selenium调用JavaScript
有些浏览器的页面操作,不能依靠WebDriver提供的API来操作,需要借助JavaScript脚本. webdriver提供了execute_script()方法来执行JavaScript代码. f ...
java学习-3
输入语句Scanner的使用方法 1.导包 import java.util.Scanner 2.创建从键盘输入:Scanner sc = new Scanner(System.in); 3.使用 ...
zk安装管理
参考: https://www.cnblogs.com/yinzhengjie/p/9209319.html 10.52.110.48 bi-kafka-310.52.48.92 bi-kafka-1 ...
2019icpc南昌邀请赛B Polynomial （拉格朗日插值法）
题目链接:https://nanti.jisuanke.com/t/40254 题意: 思路: 这题要用到拉格朗日插值法,网上查了一下,找到一份讲得特别好的: -------------------- ...
Solve the Equation
Solve a given equation and return the value of x in the form of string "x=#value". The equ ...
sql server如何精准匹配字符中的字符，绝对匹配
举例: 我现在是需要查询这字段里包含1的数据我如果直接charindex,那么11,12也会被包含. 解决(1): select * from ( select '1,2,12,111' as s ...
使用Keras基于RCNN类模型的卫星/遥感地图图像语义分割
遥感数据集 1. UC Merced Land-Use Data Set 图像像素大小为256*256,总包含21类场景图像,每一类有100张,共2100张. http://weegee.vision ...
百度地图 echarts tooltip属性经纬度坐标不显示
中国地图.散点图结合点击后显示当前城市数量不显示经纬度坐标 echarts.appMap = function (id, opt) { // 实例 var chart = this.init(doc ...
Clang调试deadcode思路
首先描述下我的环境:Ubuntu16.04 llvm4.0 clang4.0全部使用源码安装方式 Clang的根目录,位于llvm-src下边的tools目录下. 因为需要找到真正的开关,下边我描述下 ...

css中"."，","，“~”和“>”符号的意义