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

绝地灬酷狼 2022-06-05 11:13 183阅读 0赞

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

## 先来个**引子**： ##

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

*  **兄弟选择器**

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

好了解决了。![这里写图片描述][SouthEast 1]

## 用**:checked**做一个关闭按钮 ##

点击“**关闭**”即可。![这里写图片描述][SouthEast 2]

## 用hover实现下拉菜单 ##

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

#father:hover ul{ display:block; }

## 用target实现选项卡切换 ##

核心代码：

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

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

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

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

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

[SouthEast]: /images/20220605/e1d77cdc88a248ed84da8c455c0009be.png
[SouthEast 1]: /images/20220605/100989fb06c54dcab580edf028209b8f.png
[SouthEast 2]: /images/20220605/bb096a3bffec45aeb7b7a8de1153b306.png

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

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关学会这21条，你离 Vim 大神就不远了！

相关 JS妙用&&和||

相关 js中return false的妙用

相关宏的妙用

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

相关 void的妙用

相关 js妙用

相关 Convert的妙用

相关 onerror的妙用

相关 Attribute的妙用 ---- 拦截器（过滤器）