css中的~号作用

很有意思偶尔会遇到一个奇特的符号,今天来看下css ~ 的意思:

css中“~”是:

p~ul{

    background:red;

}

为所有相同的父元素中位于 p 元素之后的所有 ul 元素设置背景:

p~ul 选择前面有 <p> 元素的每个 <ul> 元素。

例子:

<style>

    .a~.b{color:red;}

</style>

 <div class="a">

    a

     <div class="b">b1</div> 

 </div>

 <div class="b">b2</div>

 <div class="b">b3</div>

b1 是不变色,b2 和 b3 变颜色

定义和用法:

  p~ul选择器 p之后出现的所有ul。

  两种元素必须拥有相同的父元素,但是 ul不必直接紧随 p。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 第1章 html基本结构 认识HTML: html不是一种编程语言,是一种标志语言 标记语言是由一套标识标签组成的...
    不喝可乐_7889阅读 3,902评论 0 0
  • HTML基础 本文包括 HTML基本知识与结构 HTML常见标签 标签写法与嵌套的讨论 HTML、CSS、java...
    廖少少阅读 6,340评论 2 21
  • 转载请声明 原文链接地址 关注公众号获取更多资讯 第一部分 HTML 第一章 职业规划和前景 职业方向规划定位...
    前端进阶之旅阅读 16,685评论 32 459
  • 工厂模式类似于现实生活中的工厂可以产生大量相似的商品,去做同样的事情,实现同样的效果;这时候需要使用工厂模式。简单...
    舟渔行舟阅读 12,377评论 2 17
  • 一、命名规范 *命名原则:”简洁明了“为核心原则* 1.项目名称:[https://www.jianshu.com...
    heaven_8f52阅读 4,574评论 0 0