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中"."，","，“~”和“>”符号的意义的更多相关文章

  1. 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- 小屏幕 平板 ( ...

  2. 可视化Tensorboard图中的符号意义

    可视化Tensorboard图中的符号意义

  3. C++中弱符号（弱引用）的意义及实例

    今天读别人代码时看到一个“#pragma weak”,一时没明白,上网研究了一个下午终于稍微了解了一点C.C++中的“弱符号”,下面是我的理解,不正确的地方望大家指正. 本文主要从下面三个方面讲“弱符 ...

  4. 浅析CSS中的BFC和IFC

    1. 为什么会有BFC和IFC 首先要先了解两个概念:Box和formatting context: Box:CSS渲染的时候是以Box作为渲染的基本单位.Box的类型由元素的类型和display属性 ...

  5. CSS中不为人知Zoom属性的使用介绍(IE私有属性)

    其实Zoom属性是IE浏览器的专有属性,Firefox等浏览器不支持.它可以设置或检索对象的缩放比例.除此之外,它还有其他一些小作用,比如触发ie的hasLayout属性,清除浮动.清除margin的 ...

  6. CSS中的class与id区别及用法

    转自http://www.divcss5.com/rumen/r3.shtml及http://www.jb51.net/css/35927.html 我们平常在用DIV CSS制作Xhtml网页页面时 ...

  7. 深入理解CSS中的层叠上下文和层叠顺序(转)

    by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxinxu.com/wordpress/?p=5115 零.世间的道 ...

  8. CSS中的ul与li样式详解

    CSS中的ul与li样式详解ul和li列表是使用CSS布局页面时常用的元素.在CSS中,有专门控制列表表现的属性,常用的有list-style-type属性.list-style-image属性.li ...

  9. 深入理解CSS中的层叠上下文和层叠顺序

    零.世间的道理都是想通的 在这个世界上,凡事都有个先后顺序,凡物都有个论资排辈.比方说食堂排队打饭,对吧,讲求先到先得,总不可能一拥而上.再比如说话语权,老婆的话永远是对的,领导的话永远是对的. 在C ...

随机推荐

  1. word2010 标题自动编号设置

    今天打算写篇文档,发现生成标题时无法自动生成编号,上网查了一下,现在把解决办法跟附图一块儿奉上. 新建word文档: 默认版式: 设置自动编号所在工具栏位置: 设置选择: 最终结果:

  2. 如何使用JavaScript实现前端导入和导出excel文件

    一.SpreadJS 简介 SpreadJS 是一款基于 HTML5 的纯 JavaScript 电子表格和网格功能控件,以“高速低耗.纯前端.零依赖”为产品特色,可嵌入任何操作系统,同时满足 .NE ...

  3. Java基础(六)

    面向对象 概述 生活举例 代码体验 类与对象的关系 类的定义 根据类创建对象 对象的基本使用 练习:手机类与对象 内存图:一个对象 内存图:两个对象 内存图:同一个对象 局部变量与成员变量的区别 pr ...

  4. Spring Boot+CXF搭建WebService服务参考资料

    pom.xml文件引入包: <!--WerbService CXF依赖--> <dependency> <groupId>org.apache.cxf</gr ...

  5. react生态常用库分类

    一. web项目 1.脚手架 create-react-app 自动安装react.react-dom 2.核心 react.react-dom 3.路由 react-router.react-rou ...

  6. mysql转换表的存储引擎方法

    如果转换表的存储引擎,将会丢失原存储引擎的所有特性. 例如:如果将innodb转换成myisam,再转回innodb,原innodb表的的外键将丢失. 假设默认存储引擎是MyISAM转为InnoDB ...

  7. WPF最小化窗体后激活函数显示不了窗体

    WPF最小化窗体后激活函数显示不了窗体 今天测试小哥给我提了一些问题,其中一个问题是这样的,点击web端的一个链接,是能启动本地的一个应用程序的,如果本地应用程序已启动(通过tcp进程间通信),那么应 ...

  8. ubuntu终端安装最新ss

    有时候因为加密方式比较新,比如aes-256-gcm,导致旧版本的不能用 一句命令安装ss最新版本 aes-256-gcm加密方式可以用,没毛病

  9. nested exception is org.apache.ibatis.reflection.ReflectionException: There is no getter for property named 'enterpriseId' in 'class java.lang.String'

    错误信息: nested exception is org.apache.ibatis.reflection.ReflectionException: There is no getter for p ...

  10. v-bind:value="diy" 添加到 <input type="button" /> 中可以,添加到<button />中不可以,diy是data中的数据

    v-bind:value="diy" 添加到 <input type="button" /> 中可以, 添加到<button />中不可 ...