【CSS】CSS选择器的妙用，学会你就不用js了。

来源：互联网发布：淘宝销量多久更新一次编辑：程序博客网时间：2024/06/05 19:05

我们都知道css选择器有很多种，但是摸着良心说，你常用的有几个？
都一样，ID和class嘛！
看这篇博文的你，与我一样幸运。希望大家看完之后，能对css选择器多一些理解与运用。它真的可以帮你省去很多繁琐的js操作。

先来个引子：

这里写图片描述
这种情况，咋办？
有人说，给每个li起个名字，然后border-left:none;
可以，但是麻烦！

兄弟选择器

ul > li + li{    border-left:none;}

好了解决了。这里写图片描述

用:checked做一个关闭按钮

  <style>        .father{            width: 20vw;            height: 20vh;            background-color: pink;        }        #close，#close:checked ,#close:checked +label ,#close:checked + label + .brother {            display: none;        }    </style><body><div class="box">    <input type="radio" id="close"/><label for="close">关闭</label>    <div class="brother">        我是兄弟,他要关闭我    </div>

点击“关闭”即可。这里写图片描述

用hover实现下拉菜单

这个大家应该都用过，核心代码就是

#father:hover ul{    display:block;}

用target实现选项卡切换

核心代码：

#content1{    z-index:1;}#content1:target,#content2:target,#content3:target{    z-index:999;}

意思就是，默认显示#content1,之后点哪一个让哪一个层级最高就行。

其实只要是单击之后的简单操作，都可以通过target来实现。

说白了，就是平时要多思考，选择器我们都知道，就是想不到他这么多用法而已。

挚谢阅读。若有纰漏，还请不吝指出。

阅读全文

0 0