• 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. C# 字符串 相关操作

    你或许知道你能使用String.Trim方法去除字符串的头和尾的空格,不幸运的是. 这个Trim方法不能去除字符串中间的C#空格. static void Main()         {       ...

  2. 51nod1563

    题解: 其实只要排个序贪心一下就好了...代码600B不到... 代码: #include<bits/stdc++.h> using namespace std; ,INF=1e9; in ...

  3. 一个Flex 对话框的坑

    最近在项目中遇到一个问题,在Flex中使用Alert.show("this is content!", "title");发现对话框可以弹出来,但是文本始终不显 ...

  4. selenium（二）查找定位目标 ID XPATH CSS 操作目标

    简介: 我们只打开一个页面是没有什么意义的. 尽管你可以get很多次. selenium可以做的更多,比如找到百度的搜索框,输入我们要搜索的内容,再用鼠标点击搜索按钮,再把搜索结果提取出来…… 这篇文 ...

  5. static 关键字介绍

    大家都知道,我们可以基于一个类创建多个该类的对象,每个对象都拥有自己的成员,互相独立.然而在某些时候,我们更希望该类所有的对象共享同一个成员.此时就是 static 大显身手的时候了!! Java 中 ...

  6. L1-027 出租

    下面是新浪微博上曾经很火的一张图: 一时间网上一片求救声,急问这个怎么破.其实这段代码很简单,index数组就是arr数组的下标,index[0]=2 对应 arr[2]=1,index[1]=0 对 ...

  7. 爬虫从网页中去取的数据中包含&nbsp;空格

    爬虫从网页中爬取的数据中带了一个 这样的空格,使用trim()函数和replace(" ", "")去掉不了,找了一下资料发现,空格有两种一种是从键盘输入的对应 ...

  8. centos7.5 安装 redis-4.0.11

    1.下载redis包 wget wget http://download.redis.io/releases/redis-4.0.11.tar.gz 2.解压安装 #解压 .tar.gz #安装 cd ...

  9. SWIFT Enumeration(2)

    之前记录了Swift Enumeration(1),这篇算是它的延续吧,继续说下Enumeration,看以下定义 enum TrainStatus { case OnTime case Delay( ...

  10. OC基础:属性.点语法.KVC 分类： ios学习 OC 2015-06-24 17:24 61人阅读 评论(0) 收藏

    属性:快速生成setter和getter 属性也包括:声明和实现 1.属性的声明写在.h中 格式:@property 数据类型 变量名; 如果实例变量一致的时候,属性的声明可以合并,每一个属性之间使用 ...