使用CSS伪元素控制连续几个元素的样式方法
程序员文章站
2022-03-27 20:06:55
用css伪元素控制元素的时候经常性的需要改变一些元素的样式,网上有许多博客都说了如何去控制一个的改变,但是我在实际写的过程中,发现更多时候是需要控制多个连续元素的改变。使用伪元素去控制(以:hover...
用css伪元素控制元素的时候经常性的需要改变一些元素的样式,网上有许多博客都说了如何去控制一个的改变,但是我在实际写的过程中,发现更多时候是需要控制多个连续元素的改变。
使用伪元素去控制(以:hover为例),当鼠标停留在a时,bcd.....样式的改变
a与bcd....是相邻同级关系,要求a在bcd的最上面
<div class="a"></div> <div class="b"></div> <div class="c"></div> <div class="d"></div> //相应用a控制bcd的css代码 .a:hover + .b{ background-color: orange; } .a:hover + .b+ .c{ background-color: orange; } .a:hover + .b+ .c+ .d{ background-color: orange; }
如果把a换到其他位置,是达不到效果的;或者只写css的最下面的控制代码只能控制第三个元素的样式改变,多个是达不到一起改变的。
a是bcd....是父子关系
<div class="a"> <div class="b"></div> <div class="c"></div> <div class="d"></div> </div> //相应的css代码 .a:hover .b{ background-color: orange; } .a:hover .b+ .c{ background-color: orange; } .a:hover .b+ .c+ .d{ background-color: orange; }
第一份,其实很好理解,因为element+element是去控制相邻的元素,因为a与cd不是直接相邻,那我就一级级的去寻,首先到b,因为bc是相邻的,所以我就可以去开始控制了,能控制到d同理
而第二份代码,element element是父节点控制子节点的方法,a可以直接控制b,如果需要控制c,那么先寻到b到后因为bc相邻,我再去用相邻元素控制的方法去控制c,d同理。
到此这篇关于使用css伪元素控制连续几个元素的样式方法的文章就介绍到这了,更多相关css 伪元素控制元素内容请搜索以前的文章或继续浏览下面的相关文章,希望大家以后多多支持!
推荐阅读
-
使用CSS伪元素控制连续几个元素的样式方法
-
使用 jQuery 基本选择器获取页面元素,然后利用 jQuery 对象的 css() 方法动态设置 <span> 和 <a> 标签的样式
-
css样式之元素position设为fixed/absolute/relative使用margin: 0 auto无效的解决方法
-
css中伪元素的使用方法小结(代码)
-
css如何使用id与class来控制元素样式的实例分析
-
css如何使用id与class来控制元素样式的实例分析
-
使用CSS伪元素控制连续几个元素的样式方法
-
使用 jQuery 基本选择器获取页面元素,然后利用 jQuery 对象的 css() 方法动态设置 <span> 和 <a> 标签的样式
-
css中伪元素的使用方法小结(代码)