CSS 语法中两个类之间的空格

[Livid]

最近搞明白的一件事情，下面两种语法的区别：

.class-one.class-two {
}

.class-one .class-two {
}

当两个 CSS 类名中间没有空格时，意味着规则只会在同时具有这两个类的元素上生效。比如：

<div class="class-one class-two"></div>

而中间有空格时，空格右边的元素必须是空格左边元素的子元素，规则才会生效。比如：

<div class="class-one"><div class="class-two"></div></div>

一个相关的 Codepen 测试：

https://codepen.io/livid-the-flexboxer/pen/MWwVQXm

[JCZ2MkKb5S8ZX9pq]

光 ab 关系的话，大概有：

.a,.b - a 或 b
.a.b - a 且 b
.a>.b - a 的直系子 b
.a+.b - 紧接着 a 的 b
.a~.b - a 后面的 b

其它一般还会配合伪类，first-chlid / first-type / not / focus / 等等一大堆。

[dremy]

不考虑那些伪类 /伪元素选择器，普通的选择器都有十几种呢，并不只有.class 这么简单，当然也根本不难，只是普通的基础知识点罢了

问题的原因就跟学 Java 直接从 spring 学起一样，必定是会遗漏很多细微的知识点的

[zhw2590582]

五年前端的我，也对一大堆莫名其妙的 css 写法迷迷糊糊，不过不用再写兼容老浏览器的 hack 已经是很幸福的事了。

[Maxbee]

学习了

[Benisme]

我以为这是常识……而且你如果不懂这个是怎么做出 v2 页面的？？？看了一眼 css 文件

.selectboxit-list .selectboxit-option-anchor {
color:#333
}
.selectboxit-list>.selectboxit-focus>.selectboxit-option-anchor {
color:#fff;
background-color:#333343
}
.selectboxit-list>.selectboxit-disabled>.selectboxit-option-anchor {
color:#333
}

[bigShrimp8577]

这不是入门第一天就该知道的吗(●—●)

[levon]

首先，有空格的情况我相信 99.9%的写过 CSS 的人都知道怎么回事，楼主也 1000%知道这个。但没空格的情况我相信至少 90%的人没有用过，不知道根本不是什么问题。

[Canrz]

@levon 没空格的用法还是比较常用的，某个元素处于选择或者激活状态，一般都是写成.class.active 或者.class.current 来加权，轮播图、导航条、菜单栏这些都会用到。

[levon]

@Canrz 你说的 active,selected 这些临时添加的 class，常常也使用父元素来定位，不使用那种没空格的也完全没问题，除非你是天天写 css 的，不然根本不需要纠结这点东西

[Sapp]

@levon 学 css 都不看文档的吗？随便搜 css 的文档，选择器里几乎前几个例子就必然有讲这个的，这个几乎是除了后代选择器之外的最常见的组合用法了，又不是藏得多深的东西，这年头写个东西连文档最前面最基础的一块都不愿意看，不是多正当的理由吧？

[widewing]

哈哈哈哈站长遭到群嘲真是活久见😆 说起来这个我一个后端➕运维都知道

[levon]

@Sapp 你到现在为止有发现非用这种写法不可的地方吗

[levon]

@Sapp 不使用这种不带空格的写法是会妨碍访问量还是妨碍访问速度

[hjzx050935]

我觉得还蛮正常的，其实如果只是单纯想写个页面，不需要从头到尾把 CSS 吃透（虽然我刚开始看 CSS 也看到了这个😂）。

我们觉得需要用到一些知识的时候再去学习、总结，也是一种方法。在那些拼命赶需求改 Bug 的日子里，不断从一个问题跳到另一个问题，不断从问题中学到很多很 low 的知识点，虽然有点丢脸哈哈哈，但完全是正常操作。

想起来曾经面对一些无从下手的领域，我们不也是这样被逼着学了一点皮毛就开始干。最后出了 Bug 才拍拍脑袋说，WOC 这不就是基础吗？

[rainymorn]

看到这贴,突然想起这个知识以前就搞明白多次了,一直忘了就学,学了再忘,最近又要搞 css,头大中......

[Phariel]

@Livid 其实关于 CSS 选择器权重问题，看这一篇就够了
alligator.io/css/understanding-specificity-in-css/

[iConnect]

社区里对这种小白问题很不友好，经常把提问的人喷到淹死。建议站长开个“小白”Node，友善一点

[cmdOptionKana]

专写前端的人可能常用，但不是每个程序员都需要研究前端技术，很多人就是偶尔写少量简单的页面，大部分情况直接上 UI 库就搞定了，根本不需要按部就班看 CSS 教程。

就算手写原生 CSS，只用单个 class，完全不用复合 class，不太复杂的页面也够用了（可能有些地方会麻烦一点，马上搜索一下照搬别人的，对于非专业前端来说，完成需求这件事就过去了，不深入学习才是常态吧）

[Alchemist13]

好久没用过 CSS，都快忘了这个了，现在再看一下，应该又能记住一段日子 233

[ChanKc]

@ericls 程序员也分 aot 和 jit 吗（笑