stylus选中hover元素的兄弟元素下的子元素

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>
时间: 2024-10-13 01:25:19

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

bobo jquery获取当前元素下的子元素的子元素

<div class="Bg01"><ul><li class="Bold">黑域名告警</li><li>总数:<span class="Mycolor">24条</span></li><li>未处理:<span class="Myred">03条</span></li></ul

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

在IE6,IE7下,子元素使用position:relative.父元素使用overflow:auto后,我们预期的是滚动条滚动时,子元素也随着滚动,实际情况是内容不滚动,就感觉你是定位定在那里了. 解决办法是父元素添加position:relative样式

css的经典问题:父元素下的子元素越界问题?

CSS的经典问题一:父元素下第一个子元素的margin-top越界问题以及末个子元素margin-bottom的越界问题? 1. 为父元素加边框,防止子元素延伸.副作用是边框:2. 将margin换做padding:副作用是padding-top的值要加padding:3. 父元素overflow,副作用是将溢出部分隐藏掉可能不满足需求:4. 将父元素的第一个元素之前加一个无高度的table元素,无副作用!!! .parent:before{ content:' '; display:table

js 下获取子元素的方法

笔记核心: firstElementChild只会获取元素节点对象,从名称就可以看出来,firstChild则可以获取文本节点对象(当然也可以获取元素节点对象),比如空格和换行都被当做文本节点. js不同于jQuery,在获取DOM时,有很多不方便的地方,哎,没办法,原始的东东,虽然万能,但却不方便. 咱今天在使用原生js的时候,就遇见一个坑------>firstChild,具体是使用firstChild获取元素的第一个子节点,可是相当的悲剧!!! 这个是一个小模型: <div> &l

用 -webkit-mask-image 解决 border-radius 元素对应用了 transform 的子元素 overflow:hidden 失败的 BUG (WebKit下).

今天在网上学习的时候看到一个文章,感觉以后可能会用到,所以就COPY了过来,以便以后可以查阅,感谢 MaCheng 的分享,原文地址:http://blog.mc-zone.me/article/370 在 CSS3 的 border-radius 上能遇到很多坑.有关 Android 移动端各种兼容就不说了.最近又遇到一个 Webkit 下对于应用了transform 的子元素 overflow:hidden 失效的情况. 问题重现 在一个应用了 border-radius 的圆角元素上,加上

[ jquery 子元素选择器 总结 ] 总结: 伪类子元素选择器

总结: 伪类中的子元素选择器: 第一种类型: :first-child :last-child :nth-child() :nth-last-child() 第二种类型: :only-child :only-of-type 第三种类型: :first-of-type :nth-last-of-type() :nth-of-type() 特点: 伪类选择器很有特点: 1.位置:可以直接通过伪类选择器直接获取开始 结束 和第几个,通常和目标元素在什么位置上有关,可以从正着数,也可以从倒着数,计数从

CSS子元素居中(父元素宽高已知,子元素未知)

<style> .container{width:400px; height:400px; position:relative;} .center{position:absolute; left:0; top:0; bottom:0; right:0; margin:auto; width:50px; height:50px; //宽高可以不写 } </style> <div class="container"> <div class=&quo

div鼠标悬停,子元素上移,鼠标移出,子元素下移动画。

HTML: <div class="edt_title" > <div id="edt_title"> <p class="edt_title_top">e定投</p> <div class="product_line"></div> <p class="edt_title_c"> 多种期限<br /><b

css控制父元素下的子元素自适应高度,且高度一致

css代码: .wrap{width:600px;margin:0 auto; overflow:hidden;} .left{background:#ccc;width:300px;float:left;margin-bottom:-10000px;padding-bottom:10000px;} .right{background:#eee;width:300px;float:left;margin-bottom:-10000px;padding-bottom:10000px;} html