如何用CSS来响应同级DIV的前一个元素？

html-css012

如何用CSS来响应同级DIV的前一个元素？,第1张

b这一类的元素都是a的同级元素并且是a元素之后的就可以a:hover~b{....}

完美解决 ，经测试！

附上我自己的代码：

ul li a img:hover ~h3 {

    padding-bottom: 10px

    color: #25AAFF!important

    border-bottom: 2px solid #25AAFF

}

在一些网站的登录页面上，经常可以发现，一张图片叠加在另一张图片上，底层的图片若隐若现，利用css中的透明属性opacity可以实现这种效果，下面就简单介绍一下怎么写代码

01

新建一个HTML文件，下载两张图片，如下图，放在一个文件夹中，避免出现路径问题

02

代码示例如下，主要利用css伪元素::before，F_box为前置层，浮于背景上方

03

下面简单分解下代码，分为1，2，3，第一部分，设置背景图片001.jpg；第三部分，固定前置层图片002.jpg的位置；第二部分，利用伪元素：：before，设置属性opacity来调节透明度，取值为0-1，0是全透明，即看不见的效果，1是全不透明

04

代码示例中，设置opacity为0.5，半透明状态，实际页面效果如下

用jquery 实现查找第一个元素：

html代码：

    <ul>

        <li>11</li>

        <li>22</li>

        <li>33</li>

        <li>44</li>

        <li>55</li>

    </ul> 有三种jQuery方法可以实现：

$('ul').find('li:first')

$('ul li:first')

$('ul li').eq(0)