您的位置：首页 > Web前端 > CSS

CSS波浪选择器

2020-07-18 05:08 756 查看

~（波浪号）概念

~（波浪号）：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;
}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航