css中“~”

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

设置同一父元素下的 p 元素之后的每一个 ul 元素的背景颜色:
p~ul { background:#ff0000; }

element,element   div,p  
选择所有<div>元素和<p>元素
1
element element
div p
选择<div>元素内的所有<p>元素
1
element>element
div>p
选择所有父级是 <div> 元素的 <p> 元素
2
element+element
div+p
选择所有紧接着<div>元素之后的<p>元素
2

css中“>”是:

  css3特有的选择器,A>B 表示选择A元素的所有子B元素。

  与A B的区别在于,A B选择所有后代元素,而A>B只选择一代。

 .a,.b{逗号指相同的css样式};.a .b{空格指后代元素};.a>.b{大于号指子代元素};

css中“~”和“>”的更多相关文章

  1. css中的浮动与三种清除浮动的方法

    说到浮动之前,先说一下CSS中margin属性的两种特殊现象 1, 外边距的合并现象: 如果两个div上下排序,给上面一个div设置margin-bottom,给下面一个div设置margin-top ...

  2. 对CSS中的Position、Float属性的一些深入探讨

    对CSS中的Position.Float属性的一些深入探讨 对于Position.Float我们在平时使用上可以说是使用频率非常高的两个CSS属性,对于这两个属性的使用上面可能大多数人存在一些模糊与不 ...

  3. 总结一下CSS中的定位 Position 属性

    在CSS中,Position 属性经常会用到,主要是绝对定位和相对定位,简单的使用都没有问题,尤其嵌套起来,就会有些混乱,今记录总结一下,防止久而忘之. CSS position 属性值: absol ...

  4. 浅析CSS中的BFC和IFC

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

  5. CSS中一些常见的兼容性问题

    CSS中一些兼容性问题就是浏览器兼容,而这些浏览器兼容问题主要是Ie和FF之间的争斗. CSS hack中的一些事: 我们为了让页面形成统一的效果,要针对不同的浏览器或不同版本写出对应可解析的CSS样 ...

  6. CSS中清除浮动的两种方式

    在CSS中,父元素中的子元素如果使用了float,会导致父元素塌陷,高度为0. 对于这种情况,常见的解决方式有两种. 一.增加新的div,应用clear:both属性 html: <div cl ...

  7. CSS 中关于background 属性功能

    background 是 css中的核心属性,我们对他应该充分了解. background-image   定义背景图像  这个属性是我们用的最多的属性 设置背景图像有两个方式 background: ...

  8. css中的负边距

    css中的负边距(negative margin)是布局中的一个常用技巧,只要运用得合理常常会有意想不到的效果.很多特殊的css布局方法都依赖于负边距,所以掌握它的用法对于前端的同学来说,那是必须的. ...

  9. CSS中不定宽块状元素的水平居中显示

    CSS中不定宽块状元素的水平居中显示 慕课网上的HTML/CSS教程 http://www.imooc.com/view/9 其中有三种方法 第一种是加入table标签 任务是实现div元素的水平居中 ...

  10. Bootstrap.css 中请求googleapis.com/css?family 备忘录

    问题描述: Web中引入bootstrap.css中头部有访问Google服务器的请求 @import url("//fonts.googleapis.com/css?family=Open ...

随机推荐

  1. 刚发现 CSS 还存在一个命名规范 B.E.M

    Block !误区:这个block并非inline-block里的block,而是将所有东西都划分为一个独立的模块,一个header是block,header里嵌套的搜索框是block,甚至一个ico ...

  2. 简单工厂模式demo

    1. 简单工厂模式 domain的接口 public interface Color{ public void display(); } red public Class Red implements ...

  3. NET Core微服务之路:基于Ocelot的API网关Relay实现--RPC篇

    前言 我们都知道,API网关是工作在应用层上网关程序,为何要这样设计呢,而不是将网关程序直接工作在传输层.或者网络层等等更底层的环境呢?让我们先来简单的了解一下TCP/IP的五层模型.     (图片 ...

  4. NeuChar 平台使用及开发教程(二):设置平台账号

    在上一篇<NeuChar 平台使用及开发教程(一):开始使用 NeuChar>中我们了解了 NeuChar 的角色和大体功能框架,并进行了注册,本文将介绍如何设置多账号,以便让 NeuCh ...

  5. [Swift]LeetCode434. 字符串中的单词数 | Number of Segments in a String

    Count the number of segments in a string, where a segment is defined to be a contiguous sequence of ...

  6. 代码覆盖率 (Code Coverage)从简到繁 (一)

    代码覆盖率(Code Coverage)是反映测试用例对被测软件覆盖程度的重要指标,也是衡量测试工作进展情况的重要指标.它也是对测试工作进行量化的重要指标之一,测试工作往往不如开发那样激动人心,一个重 ...

  7. win10安装ubuntu16.04及后续配置

    原文地址:https://www.jianshu.com/p/842e36a8255c UEFI 模式下win10安装ubuntu16.04双系统教程 - baobei0112的专栏 - CSDN博客 ...

  8. Nginx篇--Nginx源码搭建

    Nginx安装步骤: 1.依赖 gcc openssl-devel pcre-devel zlib-devel    安装:yum install gcc openssl-devel pcre-dev ...

  9. .NET Core中的CSV解析库

    感谢 本篇首先特别感谢从此启程兄的<.NetCore外国一些高质量博客分享>, 发现很多国外的.NET Core技术博客资源, 我会不定期从中选择一些有意思的文章翻译总结一下. .NET ...

  10. 《HelloGitHub月刊》第 08 期

    <HelloGitHub>第 08 期 兴趣是最好的老师,<HelloGitHub>就是帮你找到兴趣! 简介 最开始我只是想把自己在浏览GitHub过程中,发现的有意思.高质量 ...