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

[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. 空格