• 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. CoderForce 148D-Bag of mice （概率DP求概率）

    题目大意:美女与野兽在玩画鸽子的游戏.鸽子在用黑布遮住的笼子里,白色的有w只,黑色的有b只,每次拿出一只作画,谁先画到白色的鸽子谁就赢.美女首先画,因为野兽太丑,它每次画的时候都会吓跑一只鸽子,所有出 ...

  2. h5请求跨域问题Access-Control-Allow-Origin解决跨域

    访问后端接口报错:No 'Access-Control-Allow-Origin' header is present on the requested resource 解决: Access-Con ...

  3. 最应该注意的Oracle版本之一

    最近以来,两个用户的库接连出现问题,经过查阅资料和分析,确定为数据库bug所致,其实,早在很久前,也遭遇过这个版本的类似bug,当时似乎还惊动了原厂的技术人员,后来确定为这个版本的bug,这个版本就是 ...

  4. dubbo监控中心搭建

    从网上下载了一个dubbo监控中心,地址忘了,文件名是dubbo-monitor-simple-2.5.3-assembly.tar.gz. 修改监控中心配置文件如下: dubbo.container ...

  5. Vysor安装

    Vysor安装     Vysor安装    

  6. React教程-初入

    学习了React很久,一直没有机会总结下,最近打算写一个简单的React,希望让初学者一看就懂,不走弯路,我尽量写的简明点好了开始吧!首页我们要利用npm安装 react(当然你也可以用引用方式)跟着 ...

  7. DevExpress v17.2新版亮点—Bootstrap篇（一）

    用户界面套包DevExpress v17.2日前终于正式发布,本站将以连载的形式为大家介绍各版本新增内容.本文将介绍了Bootstrap Controls v17.2 的CardView.Charts ...

  8. SharePoint Infopath表单服务-PowerShell

    1. 激活可浏览的表单模板 Set-SPInfoPathFormsService -AllowUserFormBrowserEnabling $true -AllowUserFormBrowserRe ...

  9. xcode cocos2dx升级

    原文转自:http://www.codeo4.cn/archives/690 cocos2d-x的安装脚本里没有升级的脚本,我们如果在新版本安装的时候加上参数:-f 强制安装也没有能完全解决问题.新建 ...

  10. cocos2d-x移植：xcode到eclipse

    xcode程序移植到eclipse 必要组件: 1.macos gcc编译器,若没有,在xcode->preference->downloads中下载command line tools( ...