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]

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

[1KN6sAqR0a57no6s]

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 各方面使用体验还是很好的。了解这个的重要作用不就是写网站么。

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

[kikyous]

这是有多菜

[gouflv]

学前端不去看 MDN 的文档 等于白学

[cmdOptionKana]

@kikyous Livid 不知道这个知识点所以很菜，同时 Livid 做出了这个网站所以不菜，那么问题来了，Livid 菜不菜？

考试 99 分的人做错了一题，考试 59 分的人做对的题里刚好包括前者做错那题，两者谁更菜？

[HuHui]

面试大概率过不了吧😊

[oneisall8955]

噗，jq 和 css 选择器，基操吧

[minglanyu]

@gouflv 我觉得我们都欠 MDN 一个会员

[maomaomao001]

@Livid 这在这里提个建议，拉黑功能可不可以再增强一下， 拉黑后，评论折叠之类的 ，现在拉黑，直接楼层就对不上了 ， 拉红 ，多个设备数据又不同步...
望考虑

[woodensail]

确切的说不光是类选择器，你可以中间不带空格的写一大堆选择器，用来指定一个元素，比如「 div.btn:first-child 」表示选择一个 class 包含'btn'的 div 标签，且该标签必须是其父节点的第一个子节点。
然后空格则是表示后代，空格前后也可以选择使用任何单个或多个选择器的组合来筛选节点。

[adjusted]

.class-one.class-one 优先级是高于 .class-one 的，有的时候会用来强制样式

[SteveZou]

哈哈哈，是不是相当于这个：大哥会造火箭，但是不知道螺丝是往哪个方向扭的😂

[Hoops]

@Livid 我好想被降权很久了，什么时候可以在回来，每天都很活跃。

[Mutoo]

可能是每个人的学习路径不一样吧，不过个这个真的是属于 Getting Started 的内容

Descendant combinator
https://developer.mozilla.org/en-US/docs/Learn/CSS/First_steps/Getting_started#Styling_things_based_on_their_location_in_a_document

[cmdOptionKana]

话说，对于一个主攻后端的人来说，没有系统地学过 CSS，很正常吧，写前端页面的时候一般都是很散乱地现学现卖，一顿操作把想要的效果做出来就算了，不会全面、系统地去学前端，所以漏掉一些知识点也很容易理解啊。

[redam]

说实话，要不是看到了你 id，我以为你在钓鱼 →→

[llb123]

@HuHui 面试不会问这么基础的，css 甚至都不怎么会问了

[Andy1999]

虽然 Livid 刚知道这个但是并不妨碍他日入数万 :)

[robinlovemaggie]

CSS 于我时谜一样的存在～

[jugelizi]

好吧
css 入门第一天老师就教的
然后 这个描述并不准确

[WhatIf]

把逗号和大于号的作用和正文提到的两个放在一起记忆， 就容易多了

[ghostsf]

1. 连着写
2. 逗号
3. >
4. 空格

[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 吗（笑

[ericls]

@ChanKc 我觉得所有信息都有这个区别吧