css兄弟选择器配合鼠标点击实现不同效果

2021/9/29 23:13:58

编程Tag： 点击选择器 css 元素 H5 鼠标

本文主要是介绍css兄弟选择器配合鼠标点击实现不同效果，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

单纯的用css美化表单、css+ ~选择器

css兄弟选择器配合鼠标点击实现不同效果
- css + ~ 选择器
- 鼠标点击的几种状态
- 表单元素的美化

css兄弟选择器配合鼠标点击实现不同效果

最后完成的案例：完成表单元素的美化（单选框）
在写网页时，特别是在配合鼠标状态完成一定效果的时候，发现利用伪类配合相应的选择器就能实现相应效果。其中选择器中要想选择兄弟元素应用比较多的是+ ~。至于鼠标的几种状态下边也会有所涉及。
最终实现案例表单元素的美化！！！！

css + ~ 选择器

相同点：两个选择器都是选择兄弟元素的，值得注意的是，其选择的范围是该元素后的兄的元素。（不能是他前边的兄弟元素啦！css也没有父元素选择器【当时自己傻傻的找父元素选择器，真傻，以后注意】）
不同点：~选中的是后边所有符合条件的兄弟元素，+选中的是后边紧挨着的下一个元素。注意：两者虽然选择的范围都是后边的元素，但是， ~的范围是后边所有的元素，+后边紧挨的元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p,
        h5 {
            margin: 4px;
        }
        .box {
            background-color: burlywood;
        }
        .item {
            color: blueviolet;
        }
        
        /* +选择器之选中了下一个兄弟p标签 */
        .box .item+p {
            background: chartreuse;
        }
        
        /* + 因为紧挨着的下一个元素不是h5所以不生效 */
        .box .item+h5 {
            background: chartreuse;
        }
        
        /* 选择item后的所有兄弟h5标签 */
        .box .item~h5 {
            background-color: brown;
        }
    </style>
</head>

<body>
    <div class="box">
        <p>P标签</p>
        <h5>h5标签</h5>
        <p class="item">P标签</p>
        <p>P标签</p>
        <h5>h5标签</h5>
        <p>P标签</p>
        <p>P标签</p>
        <h5>h5标签</h5>
        <h5>h5标签</h5>
        <h5>h5标签</h5>
    </div>
</body>
</html>

运行结果：
在这里插入图片描述
总结

两个选择器都是选择该元素后边的兄弟元素
~选择后边所有符合条件的兄弟元素，+选择紧挨着的后一个符合条件的元素

鼠标点击的几种状态

hover 鼠标悬停在上边时的状态
focus 鼠标点击聚焦的状态（常见输入框点击后光标聚焦在了输入框中）
checked 鼠标选中的状态(单选多选框中点击后的状态即为checked，再点击一下取消状态)
active 鼠标点击的状态（左键点击即为active）

表单元素的美化

思路： 表单元素中单选框的美化在于利用表单元素定位到实现准备好的图片上（比如说精灵图，也可以不用图片，主要就是利用鼠标点击状态触发伪类改变样式）
单选框美化如下效果
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            background-color: burlywood;
        }
        
        /* css  美化后的样式 */
        .check {
            width: 60px;
            height: 30px;
            position: relative;
        }
        .sty {
            width: 58px;
            height: 28px;
            background-color: #fff;
            border-radius: 15px;
            border: 1px solid #c9c9c9;
            position: relative;
            transition: all .3s;
        }
        .sty::before {
            content: "";
            height: 24px;
            width: 24px;
            border: 1px solid #c9c9c9;
            background-color: #ffffff;
            border-radius: 50%;
            position: absolute;
            top: 1px;
            left: 1px;
            transition: all .3s;
        }
        
        /* css  先将单选框的大小改成预期的大小，然后将input定位到美化的位置上，使其覆盖到sty上 */
        input {
            /* 将单选框的大小设置的跟sty的大小一样大 */
            width: 60px;
            height: 30px;
            margin: 0;
            /* 将其定位到check相应位置 */
            position: absolute;
            top: 0;
            left: 0;
            /* 将其隐藏覆盖到check上 */
            opacity: 0;
            z-index: 2;
        }
        
        /* 鼠标点击后触发checked 改变美化样式 */ 
        .check input:checked+.sty::before {
            top: 1px;
            left: 30px;
        }
        .check input:checked+.sty {
            background-color: #4ed668;
        }
    </style>
</head>

<body>
    <div class="check">
        <!-- 单选框 -->
        <input type="checkbox">
        <!-- 定义样式 -->
        <div class="sty"></div>
    </div>
</body>

</html>

最终实现了如下效果：
在这里插入图片描述
其实所谓的美化就是将表单元素覆盖在美化后的样式上，通过鼠标点击改变样式