• stylus设置兄弟元素样式：

    鼠标浮动在 .video-li 元素上时，.video-li 兄弟中 .video-info 下的 .word 显示。
           .video-li

                &:hover

                    ~ .video-info

                        .word

                            visibility visible
  • 设置 h1 兄弟元素中，class 为 p1 的元素样式：
<!DOCTYPE HTML>

<html>

<head>

<style type="text/css">

h1 ~ .p1 {margin-top:50px;}

</style>

</head>

<body>

<h1>This is a heading.</h1>

<p>This is paragraph.</p>

<p>This is paragraph.</p>

<p>This is paragraph.</p>

<p>This is paragraph.</p>

<p class="p1">This is paragraph.</p>

</body>

</html>

css 通用兄弟选择器( ~ )的更多相关文章

  1. 04.CSS选择器-->相邻、通用兄弟选择器

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. 理解css相邻兄弟选择器

    今天在菜鸟教程看到了css组合选择符的“相邻兄弟选择器”,刚开始对这个概念有些不太理解,通过查阅资料并且经过一些试验总算有了些头绪. 原文解释是“相邻兄弟选择器(Adjacent sibling se ...

  3. CSS 相邻兄弟选择器

    相邻兄弟选择器(Adjacent sibling selector)可选择紧接在另一元素后的元素,且二者有相同父元素. 选择相邻兄弟 如果需要选择紧接在另一个元素后的元素,而且二者有相同的父元素,可以 ...

  4. CSS相邻兄弟选择器

    相邻兄弟选择器定义:选择紧接在另一个元素后的元素,而且两者有着相同的父元素. 代码一:<body> <h1>This is a heading.</h1> < ...

  5. css兄弟选择器，+ ~选择器的区别

     壹 ❀ 引 实习生在写搜索框下拉提示时,遇到了不知道怎么解决的问题,所以来问我.效果不难,鼠标选中输入框(focus)时,展示搜索关键字相关提示,看了眼dom结构是这样的: 在她的理解里面,选中父元 ...

  6. CSS系列之后代选择器、子选择器和相邻兄弟选择器

    后代选择器比子选择器的范围大,包含子选择器,且包含子选择器的“子孙”选择器,后代选择器使用"空格"符号间隔选择器 子选择器:子选择器只是父选择器的一级子元素,使用"> ...

  7. 前端基础-CSS的各种选择器的特点以及CSS的三大特性

    一. 基本选择器 二. 后代选择器.子元素选择器 三. 兄弟选择器 四. 交集选择器与并集选择器 五. 序列选择器 六. 属性选择器 七. 伪类选择器 八. 伪元素选择器 九. CSS三大特性 一. ...

  8. CSS的六大选择器

    选择器:选择器是一种模式,用于选择需要添加样式的元素. 首先简述六大选择器 基本选择器 标签选择器 类选择器 ID选择器 高级选择器 层次选择器 结构伪类选择器 属性选择器 其中基本选择器与层次选择器 ...

  9. CSS中的选择器(笔记)

    1.通配符选择器(*):通配符选择器是用来选择所有元素,也可以选择某个元素下的所有元素.所有浏览器都支持通配符选择器. ;;} .dome *{padding: 2px;} 2.元素选择器(Ele): ...

随机推荐

  1. 无法打开物理文件“E:\Database\VRVIES6841-FZ01-Global\VRVEIS.mdf”。操作系统错误 5:“5(拒绝访问。)”

    在用SQLServer2012附加SQLServer2000备份的数据库事,报如下错误: 无法打开物理文件“E:\Database\VRVIES6841-FZ01-Global\VRVEIS.mdf” ...

  2. json格式化

    jar包:gson-xxx.jar   import com.google.gson.Gson; import com.google.gson.GsonBuilder; import com.goog ...

  3. C语言描述队列的实现及操作（数组实现）

    一.静态数组实现 1.队列接口 #include<stdio.h> // 一个队列模块接口 // 命名为myqueue.h #define QUEUE_TYPE int // 定义队列类型 ...

  4. winform窗体this方式和handle（句柄）方式的区别

    我们来比较winform窗体的this方式和win32api handle方式实现窗体的最大化.默认窗体.半透明.不透明的区别 1.窗体界面设计 this方式按钮: btnMaxWindow. btn ...

  5. linux System V IPC Mechanisms

    Message Queues Semaphores Shared Memory

  6. SQL Server 调优系列进阶篇 - 查询语句运行几个指标值监测

    前言 上一篇我们分析了查询优化器的工作方式,其中包括:查询优化器的详细运行步骤.筛选条件分析.索引项优化等信息. 本篇我们分析在我们运行的过程中几个关键指标值的检测. 通过这些指标值来分析语句的运行问 ...

  7. 如何高效使用Google

    摘自http://simplyy.space/ 核心思想 1.首先,想好你想要寻找什么. 哪些词能够最好地描述你要寻找的信息或者概念? 哪些词是你能够用来替换的? 有没有那些词是可以不必包括在你想要搜 ...

  8. 【转】个人总结-网络安全学习和CTF必不可少的一些网站

    转自:http://blog.csdn.net/ida0918/article/details/52730662 学习的地方很多,不能一一列举,一些优秀的网址和博客可能也没有提到,大家补充吧:P就简单 ...

  9. 在ant编译java文件时产生debug信息

    使用ant编译java文件时,如果没有设置debug属性,则不会产生编译信息,ant的默认设置是不打印编译信息. 如果想在编译过程中显示编译信息,需设置debug属性为true,并且设置debugLe ...

  10. REST easy with kbmMW #4 – Access management

    在前面有关如何使用kbmMW创建REST服务器的基础上,现在已经到了考虑该如何控制用户的访问.什么是访问管理?就是“允许谁做什么"的问题. 显然,这个世界中存在数据,应该保护他而不被未授权的 ...