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

我们都知道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来实现。

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

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

猜你喜欢

转载自blog.csdn.net/liu_jiachen/article/details/78634021