CSS波浪选择器

最新推荐文章于 2024-05-22 21:02:54 发布

FF_Chen

最新推荐文章于 2024-05-22 21:02:54 发布

阅读量392

点赞数

分类专栏： CSS JS 文章标签： css html css3

本文链接：https://blog.csdn.net/ff_chen/article/details/106580349

版权

JS 同时被 2 个专栏收录

9 篇文章 0 订阅

订阅专栏

CSS

5 篇文章 0 订阅

订阅专栏

~（波浪号）概念

~（波浪号）：A ~ B表示选择A标签后的所有B标签，但是A和B标签必须有相同的父元素。

<style>
        h3~h5{
            color: red;
        }
</style>

<body>
    <div>
        <h1>我是第1行</h1>
        <h2>我是第2行</h2>
        <div>
            <h3>我是第3行</h3>
            <h5>我是测试行</h5>
            <h4>我是第6行</h4>
            <h5>我是测试行</h5>
        </div>
        <h4>我是第4行</h4>
        <h5>我是第5行</h5>
    </div>
</body>

【原文https://www.jianshu.com/p/d875f680fc6b】
在这里插入图片描述

使用案例

附上一个用了这个知识点的完整案例，导航栏
效果如图
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="./style.css">
</head>
<body>
   <ul>
        <li class="active"> <a href="">link1</a></li>
        <li> <a href="javascript:void(0);">link2</a></li>
        <li> <a href="javascript:void(0);">link3</a></li>
        <li> <a href="javascript:void(0);">link4</a></li>
        <li> <a href="javascript:void(0);">link5</a></li>
        <li> <a href="#">link6</a></li>
        <li class="slide"></li>
    </ul>
</body>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

<script>
    $(document).ready(function() {
        $('li').on('click',function(){
            $(this).siblings().removeClass('active');
            $(this).addClass('active');

            console.log("ok");

        })
    });
</script>
</html>

body{
    margin:0;
    padding: 0;
    background: #ffeb3b;
}
ul{
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%,-50%);
       -moz-transform: translate(-50%,-50%);
        -ms-transform: translate(-50%,-50%);
         -o-transform: translate(-50%,-50%);
            transform: translate(-50%,-50%);
    display: flex;
    background:#000;
    border-radius: 30px;
    overflow: hidden;
    box-shadow: 0 0 0 5px #333;
    margin:0;
    padding:0;
}
ul li{
    list-style-type: none;
    width: 150px;
}
ul li a {
    display: block;
    padding: 20px;
    text-align: center;
    color: #fff;
    transition:0.5s;
    text-decoration: none;
}
ul li.active a{
    color: #262626;
}
.slide{
    position: absolute;
    width: 150px;
    height: 100%;
    top: 0;
    left: 0;
    background:#fff;
    z-index: -1;
    transition:0.5s;
    opacity: 0;
}
ul li:nth-child(1).active ~ .slide{
    left:0;
    opacity:1;
}
ul li:nth-child(2).active ~ .slide{
    left:150px;
    opacity:1;
}
ul li:nth-child(3).active ~ .slide{
    left:300px;
    opacity:1;
}
ul li:nth-child(4).active ~ .slide{
    left:450px;
    opacity:1;
}
ul li:nth-child(5).active ~ .slide{
    left:600px;
    opacity:1;
}
ul li:nth-child(6).active ~ .slide{
    left:750px;
    opacity:1;
}

FF_Chen

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
CSS波浪选择器

~（波浪号）概念~（波浪号）：A ~ B表示选择A标签后的所有B标签，但是A和B标签必须有相同的父元素。<style> h3~h5{ color: red; }</style><body> <div> <h1>我是第1行</h1> <h2>我是第2行</h2> <div>
复制链接

扫一扫

专栏目录