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

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

Can I use?

› http://caniuse.com/

Less

› http://lesscss.org

Cool Libraries

› Bootstrap from Twitter

› Jetstrap

这是一个创建于 1702 天前的主题，其中的信息可能已经有所发展或是发生改变。

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

.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

div

空格

class-one

class-two

61 条回复 • 2020-07-08 10:52:36 +08:00

Tang

2020-03-14 00:57:52 +08:00 via iPhone

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

noe132

2020-03-14 01:12:24 +08:00

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

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

Torpedo

2020-03-14 01:16:56 +08:00

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

Livid

MOD

2020-03-14 01:19:29 +08:00

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

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

Conte

2020-03-14 01:45:53 +08:00 via Android

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

1KN6sAqR0a57no6s

2020-03-14 01:46:58 +08:00

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

Livid

MOD

2020-03-14 01:49:45 +08:00

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

ETiV

2020-03-14 01:53:45 +08:00 via iPhone

这是四十而不惑了嘛……

ericls

2020-03-14 02:17:28 +08:00 via iPhone

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

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

Cbdy

2020-03-14 03:40:36 +08:00 via Android

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

EvilCult

2020-03-14 03:45:19 +08:00 via iPhone

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

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

yech1990

2020-03-14 05:11:10 +08:00 via Android

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

LittleWhiteMouse

2020-03-14 07:49:14 +08:00

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

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

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

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

Perry

2020-03-14 08:01:29 +08:00

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

shabbyin

2020-03-14 08:07:28 +08:00 via iPhone

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

bzw875

2020-03-14 08:42:23 +08:00

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

manami

2020-03-14 08:53:00 +08:00 via Android

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

wmc

2020-03-14 08:57:16 +08:00

前端让人头大……

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

Felldeadbird

2020-03-14 09:29:06 +08:00 via iPhone

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

我一直是这么理解。

Torpedo

2020-03-14 10:25:06 +08:00

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

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

kikyous

2020-03-14 10:26:43 +08:00

这是有多菜

gouflv

2020-03-14 10:39:18 +08:00 via iPhone

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

cmdOptionKana

2020-03-14 10:43:09 +08:00

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

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

HuHui

2020-03-14 10:47:47 +08:00 via Android

面试大概率过不了吧😊

oneisall8955

2020-03-14 10:54:23 +08:00 via Android

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

minglanyu

2020-03-14 10:55:42 +08:00

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

maomaomao001

2020-03-14 10:57:17 +08:00

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

woodensail

2020-03-14 11:09:14 +08:00

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

adjusted

2020-03-14 11:14:29 +08:00

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

SteveZou

2020-03-14 11:38:43 +08:00 via Android

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

Hoops

2020-03-14 15:23:06 +08:00

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

Mutoo

2020-03-14 15:38:32 +08:00

可能是每个人的学习路径不一样吧，不过个这个真的是属于 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

2020-03-14 15:39:52 +08:00

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

redam

2020-03-14 15:44:22 +08:00

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

llb123

2020-03-14 15:53:03 +08:00

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

Andy1999

2020-03-14 16:14:09 +08:00

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

robinlovemaggie

2020-03-14 18:33:43 +08:00

CSS 于我时谜一样的存在～

jugelizi

2020-03-14 18:55:55 +08:00

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

WhatIf

2020-03-14 20:17:51 +08:00

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

ghostsf

2020-03-14 21:08:21 +08:00

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

JCZ2MkKb5S8ZX9pq

2020-03-14 21:20:02 +08:00

光 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

2020-03-14 21:22:29 +08:00 via iPhone

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

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

zhw2590582

2020-03-14 22:34:58 +08:00

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

Maxbee

2020-03-14 23:10:51 +08:00

学习了

Benisme

2020-03-14 23:16:25 +08:00

我以为这是常识……而且你如果不懂这个是怎么做出 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

2020-03-14 23:17:02 +08:00

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

levon

2020-03-14 23:32:11 +08:00

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

Canrz

2020-03-15 00:22:02 +08:00

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

levon

2020-03-15 00:36:08 +08:00

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

Sapp

2020-03-15 00:36:17 +08:00

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

widewing

2020-03-15 00:44:19 +08:00 via Android

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

levon

2020-03-15 00:45:47 +08:00

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

levon

2020-03-15 00:48:59 +08:00

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

hjzx050935

2020-03-15 03:17:40 +08:00

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

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

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

rainymorn

2020-03-15 04:38:53 +08:00

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

Phariel

2020-03-15 08:12:04 +08:00

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

iConnect

2020-03-15 09:26:14 +08:00 via Android

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

cmdOptionKana

2020-03-15 11:32:17 +08:00

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

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

Alchemist13

2020-03-17 09:56:58 +08:00

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

ChanKc

2020-07-08 10:17:50 +08:00 via Android

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

ericls

2020-07-08 10:52:36 +08:00

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