玩转CSS选择器（一）之使用方法介绍_html/css_WEB-ITnose

前言

前几天整理了CSS一些技术关键字，但是因为自己的知识过于单薄，觉得考虑的不充分有欠缺，随后便在sf.gg提出了这个问题《关于CSS核心技术关键字都有哪些？》，也是为了让厉害的人一起参与进来，用他们的经验告知我们CSS中哪一块的知识点是重要，或者说是不可欠缺的，也或者说是应该打好基础的。

在整理这份CSS技术关键字的开始，首先想到的是选择器，它作为最常用的的一个特性，几乎天天都在使用，但是如果让你说出20种CSS选择器，是不是可以脱口而出呢？哎，或许我们被浏览器逼的还停留在CSS2.1那些选择器把？CSS4规范都要问世了，我们还在玩那个？

带着这些疑问，决定梳理一下之前用到的知识点，最终以系列文章的方式说一说我对选择器的理解，具体包含的内容如下：

选择器的基础使用，主要是CSS3，也会介绍新增CSS4选择器，包括各浏览器对选择器的支持情况选择器的使用技巧，使用时常出现的一些问题，扒一扒解决方案，再说一说效率和优化的部分选择器的优先级，理一理比较头疼的权重问题，如何更轻松的理解它

导图与源码

我在写这篇文章的时候会梳理一份思维导图，用于更加直观的查阅所有的CSS选择器，并且也有编写示例代码，更方便理解文章中的示例。

关于思维导图和示例代码，会上传至Github，当然也会随着时间的允许，不定义补充和更新
仓库地址：https://github.com/Alsiso/everyday
思维导图：https://github.com/Alsiso/everyday/blob/master/codes/css-selectors/css...
示例代码：https://github.com/Alsiso/everyday/tree/master/codes/css-selectors

关于everyday是我每天记录和总结的地方，这里有代码，布局方案，移动端适配方案等等，后续会不断的补充和更新，欢迎一起聊代码，玩前端。

基本选择器

通配符选择器 *

通配符选择器用来选择所有的元素

* {    marigin: 0;    padding: 0;}

在我之的文章中讨论过CSS RESET，其中里面的核心代码就是使用通配符选择器定义的，来重置浏览器所有元素的内边距和外边距。

其实，通配符选择器还可以选择某一个元素下的所有元素

#demo *{    margin:0;}

不过使用通配符要谨慎，并不是因为通配符会带来性能问题，而是滥用通配符会造成“继承失效”或“继承短路”的问题，这种情况会对开发造成一定程度的影响。

元素选择器 E

元素选择器使用也很简单，它用于指定HTML文档中元素的样式

ul{    list-style:none;}

▲ 这里使用元素选择器选择ul元素并去除列表前面的默认圆点

类选择器.className

类选择器是最常用的一种选择器，使用时需要在HTML文档元素上定义类名，然后与样式中的.className相匹配，它一次定义后，在HTML文档元素中是可以多次复用的。

CSS

.menu {    margin:0 auto;}

HTML

声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://haodehen.cn/did113654

更新时间：2022-11-17 阅读：32次