• 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. sql连接详解

    笛卡尔乘积: A={a, b},集合B={0, 1, 2},则AxB的笛卡尔积为{(a, 0), (a, 1), (a, 2), (b, 0), (b, 1), (b, 2)}; (AxB≠BxA) ...

  2. 37. Sudoku Solver *HARD*

    Write a program to solve a Sudoku puzzle by filling the empty cells. Empty cells are indicated by th ...

  3. 使用 PM2 管理nodejs进程

    pm2 是一个带有负载均衡功能的Node应用的进程管理器. 当你要把你的独立代码利用全部的服务器上的所有CPU,并保证进程永远都活着,0秒的重载, PM2是完美的. 它非常适合IaaS结构,但不要把它 ...

  4. Netty高性能编程备忘录(上)

    http://calvin1978.blogcn.com/articles/netty-performance.html 网上赞扬Netty高性能的文章不要太多,但如何利用Netty写出高性能网络应用 ...

  5. Microsoft Office相关开发组件

    安装office,直接引用COM控件 C#4提供对PIA引用的一种方式:链接(编译器只会将PIA中需要的部分直接嵌入到程序集中),变体(variant)被视为动态类型,以减少强制转换需要的开销: 不安 ...

  6. .net下4款不错的微信SDK

    .net下4款不错的微信SDK: 一款值得推荐的.Net微信开发SDK http://www.17ky.net/soft/474.html.Net微信公开帐号接口 WeiXinSDK http://w ...

  7. C语言 string::size_type类型

    string::size_type类型 从逻辑上来讲,size()成员函数似乎应该返回整型数值,或如2.2节“建议”中所述的无符号整数.但事实上,size操作返回的是string::size_type ...

  8. Solrj调用Solr API

    在MyEclipse下的SSH项目,要调用Solr接口进行操作. 1.先运行solr 2.在已搭建好的SSH项目中用Solrj调用Solr的接口 3.导入如下solr的jar包到搭建好的SSH项目的W ...

  9. MyEclipse WebSphere开发教程：WebSphere 7安装指南（三）

    [周年庆]MyEclipse个人授权 折扣低至冰点!立即开抢>> [MyEclipse最新版下载] 五.应用WebSphere 7.0.0.x和Java SDK更新 1. 要应用这些PAK ...

  10. 使用 PHP 框架 Yii 访问 MS SQL 的尝试

    今天尝试在 Wamp 环境下访问 MS SQL 数据库,有以下心得.使用 PHP 5.3 + pdo_odbc + Yii 1.1 框架,以下两个代码段可以成功. 1.直接使用 PDO 方式,可以获取 ...