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>

stylus选中hover元素的兄弟元素下的子元素的更多相关文章

  1. jquery层级原则器（匹配父元素下的子元素）

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. Flex 4 不同主题下容器子元素的管理方法

    Flex 下,容器主要分两类:Spark容器, Halo容器. Spark容器 Halo容器 说明 numElements numChildern 容器的子元素数量. addElement( ) ad ...

  3. display:flex;下的子元素width无效问题

    因为flex属性默认值为flex:0 1 auto;其中 1 为 flex中的 flex-shrink 属性. 该属性介绍: 一个数字,规定项目将相对于其他灵活的项目进行收缩的量. 根据上述介绍可以理 ...

  4. 解决IE6,IE7下子元素使用position:relative、父元素使用overflow:auto后，子元素不随着滚动条滚动的问题

    解决IE6,IE7下子元素使用position:relative.父元素使用overflow:auto后,子元素不随着滚动条滚动的问题   在IE6,IE7下,子元素使用position:relati ...

  5. 父元素高度设置为min-height，子元素高度设置为100%，但实际上子元素高度你知道是多少吗？

    前言 给父元素一个min-height,子元素设置height:100%. 代码 <!DOCTYPE html> <html> <head> <title&g ...

  6. 关于在transform下的子元素设置fixed无效的困惑

    最近的项目是要实现一个点击显示隐藏边栏的效果,而且需要边栏随着滚动而滚动. 思路简单,不就一个css的动画和一个position为fixed,搞定!但不想,设为fixed的子元素竟然无法fixed,这 ...

  7. js 下获取子元素的方法

    笔记核心: firstElementChild只会获取元素节点对象,从名称就可以看出来,firstChild则可以获取文本节点对象(当然也可以获取元素节点对象),比如空格和换行都被当做文本节点. js ...

  8. CSS子元素居中(父元素宽高已知，子元素未知)

    <style> .container{width:400px; height:400px; position:relative;} .center{position:absolute; l ...

  9. 解决 border-radius 元素在应用了 transform 的子元素 时overflow:hidden 失效的问题

    受大家启迪,于是最近深入研究了一下Css3中的一些属性.之中也是碰到了个不为我知的问题,在这里特此总结并与大家分享. 问题重现:在父元素上应用了 border-radius 的圆角属性.加上  ove ...

随机推荐

  1. Python爬虫番外篇之关于登录

    常见的登录方式有以下两种: 查看登录页面,csrf,cookie;授权:cookie 直接发送post请求,获取cookie 上面只是简单的描述,下面是详细的针对两种登录方式的时候爬虫的处理方法 第一 ...

  2. 9. leetcode 389. Find the Difference

    Given two strings s and t which consist of only lowercase letters. String t is generated by random s ...

  3. 聪聪和可可[NOI2005]

    [问题描述] 在一个魔法森林里,住着一只聪明的小猫聪聪和一只可爱的小老鼠可可.虽然灰姑娘非常喜欢她们俩,但是,聪聪终究是一只猫,而可可终究是一只老鼠,同样不变的是,聪聪成天想着要吃掉可可. 一天,聪聪 ...

  4. iOS底层学习-KVC使用实践以及实现原理

    简介 KVC(Key-value coding)键值编码,顾名思义.额,简单来说,是可以通过对象属性名称(Key)直接给属性值(value)编码(coding)"编码"可以理解为& ...

  5. 【有意思的BUG】反转的水印

    今天无意中看到一个图集,翻着翻着感觉到哪儿不对劲.是的,水印打反了,怎么会出现这样的局面我也不知道,可能就是手抖了吧. 通过与懂这方面知识的人请教,120%的可能是因为图片本身就自带水印,而不是因为后 ...

  6. Java入门——（5）Java API

      关键词:String类.StringBuffer类.System类.Math类.Random类.Date类.Calendar类.DateFormat类   API (Application Pro ...

  7. 表空间移动（transporting tablespaces）

    --表空间移动(transporting tablespaces) --------------------------------------2014/01/15   1. 表空间传输步骤简介.   ...

  8. Luogu P1649 [USACO07OCT]障碍路线Obstacle Course

    题目描述 Consider an N x N (1 <= N <= 100) square field composed of 1 by 1 tiles. Some of these ti ...

  9. C++ Socket学习记录 -2

    WinSock TCP 编程流程 TCP通信,就像是固定电话,首先是要安装基站,然后是将电话号绑定到电话,然后拨号,接通之后说事,完事之后还要挂电话(甭管谁先挂). 1.初始化环境 使用函数 int ...

  10. javascript定义二维数组与添加

    你定义的已经就是的了啊.不是很明白你的问的什么.你是说如何向里面填充?双层循环就行了撒:for(var i = 0; i < X; i++){ for(var j = 0; j < Y; ...