• 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. 关于初级dp的一些记忆

    01背包和数塔都是寒假看的,数塔还算明白,但01背包虽然会做其实也是背下来的,一直不是很清楚它的可行性,昨天老师讲了以后恍然大悟,和数塔类似生成了一颗二叉树: 利用数组/dfs  自下而上/自上而下 ...

  2. UVA-10655 Contemplation! Algebra （矩阵）

    题目大意:给出a+b的值和ab的值,求a^n+b^n的值. 题目分析:有种错误的方法是这样的:利用已知的两个方程联立,求解出a和b,进而求出答案.这种方法之所以错,是因为这种方法有局限性.联立之后会得 ...

  3. echatrs可视化图在隐藏后显示不出来或是宽度出现问题

    最近在做一个可视化的项目,用了百度的ECharts.js作为可视化的视图框架,echarts的实例很多,基本能满足项目的需求,而且文档也相对完整.清晰,是个很不错的前端可视化框架. 我们的项目是使用b ...

  4. duilib 实现 XML重用（item完全重合的CList）

    最近做一个项目,界面库用的是duilib. 软件首页的左侧是一个机型列表,右侧是机型信息及其他信息,点击左侧的机型,右边跟着变为对应的信息. 由于右侧信息比较复杂,还有进度条什么的,所以如果右侧只用一 ...

  5. learning docker steps(4) ----- docker swarm 初次体验

    参考:https://docs.docker.com/get-started/part4/ 了解 swarm 集群 swarm 是一组运行 Docker 并且已加入集群中的机器.执行此操作后,您可以继 ...

  6. scrapy-redis(七)：部署scrapy

    一般我们写好scrapy爬虫,如果需要启动的话,需要进入scrapy项目的根目录,然后运行以下命令: scrapy crawl {spidername} 这样我们就可以在终端查看到爬虫信息了.但爬虫运 ...

  7. Visual Studio build tools 安装出错的一种解决办法

    一般是安装包丢失或损坏,那么我么可以用离线下载的方式来先行下载. 用 -h 看下帮助 主要是Layout参数. 下载完,到下载目录安装吧.

  8. sql 的理解

    sql的作用有: 1.筛选数据,连接表 2.数据的补充,连接表 3.数据的加减乘除的运算,+ - * / 4.数据的逻辑运输,比如case..when...,decode,nvl,ifnull.... ...

  9. Java——IO类，转换流简化写法

    body, table{font-family: 微软雅黑} table{border-collapse: collapse; border: solid gray; border-width: 2p ...

  10. ansible 循环register

    在有循环的task中使用register,register保存的是一个列表,整个属性为results results 是一个单个循环返回的结果的列表 - debug: msg="{{ ite ...