CSS中hover改变子元素和其它元素样式

+表示下一级元素，>表示子元素

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>

<style>
    #a {color : #FFFF00;}

    #a:hover + #c{color : #00FF00;}
    #a:hover + #c > #b{color : #0000FF;}
</style>
<div id='a'>元素1

</div>
<div id='c'>元素3
    <div id='b'>元素2</div>
</div>

</html>

版权声明：本文为博主原创文章，未经博主允许不得转载。

时间： 2024-08-05 07:43:05

CSS中hover改变子元素和其它元素样式的相关文章

[ jquery 效果 show([speed,[easing],[fn]]) hide([speed,[easing],[fn]]) ] 此方法用于显示隐藏的被选元素:show() 适用于通过 jQuery 方法和 CSS 中 display:none type=&#39;hidden&#39; 隐藏的元素（不适用于通过 visibility:hidden 隐藏的元素）

show()显示隐藏的被选元素:show() 适用于通过 jQuery 方法和 CSS 中 display:none type='hidden' 隐藏的元素(不适用于通过 visibility:hidden 隐藏的元素): hide() 方法隐藏被选元素: 参数 描述 speed 可选.规定显示效果的速度. 可能的值: 毫秒 "slow" "fast" easing 可选.规定在动画的不同点上元素的速度.默认值为 "swing". 可能的值: &

小技巧 - CSS中:hover调试

在调试CSS的时候,我一般使用Chrome的F12开发者工具,或者FireFox的FireBug直接在元素上面修改好Style后,再写入到CSS中.前几天遇到一个问题就是a:hover,鼠标一移开效果就看不到了.后来查了一些资料,终于找到解决办法了. FF中: Chrome中: 没有什么技术含量,只是分享一下,也免得自己忘记了.

CSS中定位和浮动对行内元素的宽高的影响

行内元素的大小是由元素里面的内容撑开的宽高决定的,就算在css中对行内元素设置width,height.行内元素也会忽略宽高的设置. 但是当行内元素使用position:absolute或者position:fixed或者使用float属性时,width和height的设置能起作用. 因为在以上三种情况下,行内元素的display从inline变为block <style> span{ background-color:red; width:100px; height:100px; float

详解css中的display属性（行内元素和块级元素）

display属性 首先,所有主流浏览器都支持 display 属性.其次,我们都知道display 属性规定元素应该生成的框的类型.默认值:inline 我们常用的display属性值有: inline block inline-block none 把 display 设置成 none 不会保留元素本该显示的空间,但是 visibility: hidden 还会保留. 那么,display:inline.display:block和display:inline-block有什么区别呢? <s

CSS中的各个选择节点，都有样式最后一个无样式的快捷解决方法

2.1.3 多标签 多标签选择器一般和html上下文有关,它有以下集中分类 选择一个祖先的所有子孙节点,例如 div p{…} 选择一个父元素的所有直属节点,例如 div > p{…} 选择某一个元素紧挨着的兄弟节点,例如 li + li{…} 选择某一个元素的所有同胞节点,例如 span ~ a{…} 以上各种情况的组合应用(不要组合过于复杂,编码讲求可读性第一) 给大家列举一个比较典型的应用,如下图 上图中的效果应该比较常见,在各个菜单之间加下划线.我之前的实现是:每个li都加一个borde

CSS中伪类选择器及伪元素

1.伪类选择器 在CSS中,最常用的伪类选择器是使用在a(锚)元素上的几种选择器,它们的使用方法如下: a:link{color:#FF0000;text-decoration:none} a:visited{color:#FF0000;text-decoration:none} a:hover{color:#FF0000;text-decoration:none} a:active{color:#FF0000;text-decoration:none} 2.伪元素选择器 伪元素选择器不是针对真

CSS中!important的使用 转

本篇文章使用最新的IE10以及firefox与chrome测试(截止2013年5月27日22:23:22) CSS的原理: 我们知道,CSS写在不同的地方有不同的优先级, .css文件中的定义 < 元素style中的属性,但是如果使用!important,事情就会变得不一样. 首先,先看下面一段代码: <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content

CSS中的position定位

CSS定位有4中类型:通过position属性设置http://www.w3school.com.cn/cssref/pr_class_position.aspstatic:默认值.没有定位,元素出现在正常的流中(忽略top,bottom,left,right或者z-index声明)relative:生成相对定位的元素,相当于其正常位置进行定位.因此,"left:20" 会向元素的 LEFT 位置添加 20 像素.absolute:生成绝对定位的元素,相对于 static 定位以外的第

css中!important

<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>测试Css中的!Important区别</title> </head> <style type="text/css"> .testClass{