最近搞明白的一件事情，下面两种语法的区别：
.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 测试：
 |
1
Tang Mar 14, 2020 via iPhone  1
还有这种的
<div class="class-one.class-two"></div> |
 |
2
noe132 Mar 14, 2020 1
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors
带空格的是 Descendant combinator 用于选择后代元素 不带空格就是 所有 Basic selectors 的交集 |
 |
3
Torpedo Mar 14, 2020 2
你居然才知道这个？果然单一知识点没啥大用。我感觉 v2 的前端挺不错的。很符合标准，性能啥也都挺好
|
 |
4
Livid MOD OP PRO 9
|
 |
5
ConteMan Mar 14, 2020 via Android
我大概是两个星期前才搞明白的🤣
|
 |
6
1KN6sAqR0a57no6s Mar 14, 2020 9
I can't imagine that you built such a wonderful website without knowing this rule.
|
|
7
Livid MOD OP PRO @YuxiangLuo 谢谢。我打算接下来把我所有刚搞明白的事情都写出来分享一下。
|
 |
8
ETiV Mar 14, 2020 via iPhone
这是四十而不惑了嘛……
|
 |
9
ericls Mar 14, 2020 via iPhone 1
感觉中国很多公司的招聘流程有很多可以优化的地方
很多人会因为不知道这些 只需要 just in time 的知识而被刷掉 |
 |
10
Cbdy Mar 14, 2020 via Android
空格是后代选择器，>才是子元素选择器
|
 |
11
EvilCult Mar 14, 2020 via iPhone
这些个东西我一直都搞不太懂，所以平时用 less 尽量规避这些事儿 [手动捂脸] 。
顺便，不知道我是不是记错了： 这句好像会引发歧义（挑刺儿）：“ 而中间有空格时，空格右边的元素必须是空格左边元素的子元素，规则才会生效。” 貌似空格是对所有后代都生效（包括孙），尖括号才是只有子后代。貌似…… |
 |
12
yech1990 Mar 14, 2020 via Android
主要是很少会有人专门去看书学 CSS 语法，所以越简单的东西反而容易产生知识盲点。这个我是在写爬虫的时候一遍遍试明白的😂
|
 |
13
LittleWhiteMouse Mar 14, 2020 1
中间加空格是后代元素，用子元素来描述还是有偏差的。
后代是说包含在这个元素之中的所有元素都算； 子元素则必须是包含其中的，（在嵌套层面）紧邻的才可以； 中间用 > 是子元素选择器，> 左右的空格可有可无。 |
 |
14
Perry Mar 14, 2020
这个东西系统学 css 的时候或者准备前端面试的时候才会知道。
|
 |
15
shabbyin Mar 14, 2020 via iPhone
这么想好了 空格表示子类 在一个类后面紧跟的选择器都是为了该类选择器添加筛选和权重罢了
还有比如 . + . 这种语法也挺有意思 |
 |
17
manami Mar 14, 2020 via Android
CSS 让人头疼，写不出好看样式的我
|
|
18
39Sc06lk7Khhc4qV Mar 14, 2020
前端让人头大……
N 年前刚学前端的时候，甚至很晚才弄明白 jQuery DOM 和原生 DOM 是不一样的，当时还觉得很疑惑为啥某个函数一会儿好使一会儿不好使🤣 |
 |
19
Felldeadbird Mar 14, 2020 via iPhone
第一个语法是全部元素匹配。
第二个语法不是父子类（上下级关系）才生效。 我一直是这么理解。 |
|
20
Torpedo Mar 14, 2020
@Livid 我只是觉得，前几年，校招的面试必考这个。要是社招一个前端不知道这个，自然会思考他水平怎么样。但是，v2 各方面使用体验还是很好的。了解这个的重要作用不就是写网站么。
想到了之前遇到的一些比较厉害的同事。他们知识点有欠缺，但是整体解决问题的能力都特别强 |
 |
21
kikyous Mar 14, 2020 3
这是有多菜
|
 |
22
gouflv Mar 14, 2020 via iPhone
学前端不去看 MDN 的文档 等于白学
|
 |
23
cmdOptionKana Mar 14, 2020 2
@kikyous Livid 不知道这个知识点所以很菜，同时 Livid 做出了这个网站所以不菜，那么问题来了，Livid 菜不菜？
考试 99 分的人做错了一题，考试 59 分的人做对的题里刚好包括前者做错那题，两者谁更菜？ |
 |
24
HuHui Mar 14, 2020 via Android
面试大概率过不了吧😊
|
 |
25
itechify PRO 噗，jq 和 css 选择器，基操吧
|
 |
27
maomaomao001 Mar 14, 2020
@Livid 这在这里提个建议，拉黑功能可不可以再增强一下， 拉黑后，评论折叠之类的 ，现在拉黑，直接楼层就对不上了 ， 拉红 ，多个设备数据又不同步...
望考虑 |
 |
28
woodensail Mar 14, 2020
确切的说不光是类选择器，你可以中间不带空格的写一大堆选择器，用来指定一个元素，比如「 div.btn:first-child 」表示选择一个 class 包含'btn'的 div 标签，且该标签必须是其父节点的第一个子节点。
然后空格则是表示后代，空格前后也可以选择使用任何单个或多个选择器的组合来筛选节点。 |
 |
29
adjusted Mar 14, 2020 1
.class-one.class-one 优先级是高于 .class-one 的，有的时候会用来强制样式
|
 |
30
SteveZou Mar 14, 2020 via Android
哈哈哈，是不是相当于这个：大哥会造火箭，但是不知道螺丝是往哪个方向扭的😂
|
 |
32
Mutoo Mar 14, 2020
可能是每个人的学习路径不一样吧，不过个这个真的是属于 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 |
|
33
cmdOptionKana Mar 14, 2020
话说，对于一个主攻后端的人来说，没有系统地学过 CSS，很正常吧，写前端页面的时候一般都是很散乱地现学现卖，一顿操作把想要的效果做出来就算了，不会全面、系统地去学前端，所以漏掉一些知识点也很容易理解啊。
|
 |
34
redam Mar 14, 2020
说实话，要不是看到了你 id，我以为你在钓鱼 →→
|
 |
36
Andy1999 Mar 14, 2020
虽然 Livid 刚知道这个但是并不妨碍他日入数万 :)
|
 |
37
robinlovemaggie Mar 14, 2020
CSS 于我时谜一样的存在～
|
 |
38
jugelizi Mar 14, 2020
好吧
css 入门第一天老师就教的 然后 这个描述并不准确 |
 |
39
WhatIf Mar 14, 2020
把逗号和大于号的作用和正文提到的两个放在一起记忆， 就容易多了
|
 |
40
ghostsf Mar 14, 2020
1. 连着写
2. 逗号 3. > 4. 空格 |
 |
41
JCZ2MkKb5S8ZX9pq Mar 14, 2020
光 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 / 等等一大堆。 |
 |
42
dremy Mar 14, 2020 via iPhone
不考虑那些伪类 /伪元素选择器，普通的选择器都有十几种呢，并不只有.class 这么简单，当然也根本不难，只是普通的基础知识点罢了
问题的原因就跟学 Java 直接从 spring 学起一样，必定是会遗漏很多细微的知识点的 |
 |
43
zhw2590582 Mar 14, 2020
五年前端的我，也对一大堆莫名其妙的 css 写法迷迷糊糊，不过不用再写兼容老浏览器的 hack 已经是很幸福的事了。
|
 |
44
Maxbee Mar 14, 2020
学习了
|
 |
45
Benisme Mar 14, 2020
我以为这是常识……而且你如果不懂这个是怎么做出 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 } |
 |
46
bigShrimp8577 Mar 14, 2020
这不是入门第一天就该知道的吗(●—●)
|
 |
47
levon Mar 14, 2020
首先，有空格的情况我相信 99.9%的写过 CSS 的人都知道怎么回事，楼主也 1000%知道这个。但没空格的情况我相信至少 90%的人没有用过，不知道根本不是什么问题。
|
 |
48
Canrz Mar 15, 2020
@levon 没空格的用法还是比较常用的，某个元素处于选择或者激活状态，一般都是写成.class.active 或者.class.current 来加权，轮播图、导航条、菜单栏这些都会用到。
|
|
49
levon Mar 15, 2020
@Canrz 你说的 active,selected 这些临时添加的 class，常常也使用父元素来定位，不使用那种没空格的也完全没问题，除非你是天天写 css 的，不然根本不需要纠结这点东西
|
 |
50
Sapp Mar 15, 2020 1
@levon 学 css 都不看文档的吗？随便搜 css 的文档，选择器里几乎前几个例子就必然有讲这个的，这个几乎是除了后代选择器之外的最常见的组合用法了，又不是藏得多深的东西，这年头写个东西连文档最前面最基础的一块都不愿意看，不是多正当的理由吧？
|
 |
51
widewing Mar 15, 2020 via Android
哈哈哈哈站长遭到群嘲真是活久见😆 说起来这个我一个后端➕运维都知道
|
 |
54
hjzx050935 Mar 15, 2020
我觉得还蛮正常的，其实如果只是单纯想写个页面，不需要从头到尾把 CSS 吃透（虽然我刚开始看 CSS 也看到了这个😂）。
我们觉得需要用到一些知识的时候再去学习、总结，也是一种方法。在那些拼命赶需求改 Bug 的日子里，不断从一个问题跳到另一个问题，不断从问题中学到很多很 low 的知识点，虽然有点丢脸哈哈哈，但完全是正常操作。 想起来曾经面对一些无从下手的领域，我们不也是这样被逼着学了一点皮毛就开始干。最后出了 Bug 才拍拍脑袋说，WOC 这不就是基础吗？ |
 |
55
rainymorn Mar 15, 2020
看到这贴,突然想起这个知识以前就搞明白多次了,一直忘了就学,学了再忘,最近又要搞 css,头大中......
|
 |
56
Phariel Mar 15, 2020
|
 |
57
iConnect Mar 15, 2020 via Android
社区里对这种小白问题很不友好，经常把提问的人喷到淹死。建议站长开个“小白”Node，友善一点
|
|
58
cmdOptionKana Mar 15, 2020
专写前端的人可能常用，但不是每个程序员都需要研究前端技术，很多人就是偶尔写少量简单的页面，大部分情况直接上 UI 库就搞定了，根本不需要按部就班看 CSS 教程。
就算手写原生 CSS，只用单个 class，完全不用复合 class，不太复杂的页面也够用了（可能有些地方会麻烦一点，马上搜索一下照搬别人的，对于非专业前端来说，完成需求这件事就过去了，不深入学习才是常态吧） |
 |
59
Alchemist13 Mar 17, 2020
好久没用过 CSS，都快忘了这个了，现在再看一下，应该又能记住一段日子 233
|
Select Language