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

[Tang]

还有这种的
<div class="class-one.class-two"></div>

[noe132]

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors

带空格的是 Descendant combinator 用于选择后代元素
不带空格就是 所有 Basic selectors 的交集

[Torpedo]

你居然才知道这个？果然单一知识点没啥大用。我感觉 v2 的前端挺不错的。很符合标准，性能啥也都挺好

[Livid]

@Torpedo 你可能对这个世界有一种感觉就是，你觉得自己知道了的事情，全世界的其他人也就瞬间同步了。

而我确实承认自己很多事情都不知道。

[Conte]

我大概是两个星期前才搞明白的🤣

[YuxiangLuo]

I can't imagine that you built such a wonderful website without knowing this rule.

[Livid]

@YuxiangLuo 谢谢。我打算接下来把我所有刚搞明白的事情都写出来分享一下。

[ETiV]

这是四十而不惑了嘛……

[ericls]

感觉中国很多公司的招聘流程有很多可以优化的地方

很多人会因为不知道这些 只需要 just in time 的知识而被刷掉

[Cbdy]

空格是后代选择器，>才是子元素选择器

[EvilCult]

这些个东西我一直都搞不太懂，所以平时用 less 尽量规避这些事儿 [手动捂脸] 。

顺便，不知道我是不是记错了：
这句好像会引发歧义（挑刺儿）：“ 而中间有空格时，空格右边的元素必须是空格左边元素的子元素，规则才会生效。”
貌似空格是对所有后代都生效（包括孙），尖括号才是只有子后代。貌似……

[yech1990]

主要是很少会有人专门去看书学 CSS 语法，所以越简单的东西反而容易产生知识盲点。这个我是在写爬虫的时候一遍遍试明白的😂

[LittleWhiteMouse]

中间加空格是后代元素，用子元素来描述还是有偏差的。

后代是说包含在这个元素之中的所有元素都算；

子元素则必须是包含其中的，（在嵌套层面）紧邻的才可以；

中间用 > 是子元素选择器，> 左右的空格可有可无。

[Perry]

这个东西系统学 css 的时候或者准备前端面试的时候才会知道。

[shabbyin]

这么想好了 空格表示子类 在一个类后面紧跟的选择器都是为了该类选择器添加筛选和权重罢了
还有比如 . + . 这种语法也挺有意思

[bzw875]

@Tang #1 5 年前端第一次知道这种写法

[manami]

CSS 让人头疼，写不出好看样式的我

[wmc]

前端让人头大……

N 年前刚学前端的时候，甚至很晚才弄明白 jQuery DOM 和原生 DOM 是不一样的，当时还觉得很疑惑为啥某个函数一会儿好使一会儿不好使🤣

[Felldeadbird]

第一个语法是全部元素匹配。
第二个语法不是父子类（上下级关系）才生效。

我一直是这么理解。

[Torpedo]

@Livid 我只是觉得，前几年，校招的面试必考这个。要是社招一个前端不知道这个，自然会思考他水平怎么样。但是，v2 各方面使用体验还是很好的。了解这个的重要作用不就是写网站么。

想到了之前遇到的一些比较厉害的同事。他们知识点有欠缺，但是整体解决问题的能力都特别强