V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
Can I use?
http://caniuse.com/
Less
http://lesscss.org
Cool Libraries
Bootstrap from Twitter
Jetstrap
Livid
V2EX  ›  CSS

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

  •  2
     
  •   Livid · 2020-03-14 00:49:13 +08:00 · 6841 次点击
    这是一个创建于 1476 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

    .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

    61 条回复    2020-07-08 10:52:36 +08:00
    Tang
        1
    Tang  
       2020-03-14 00:57:52 +08:00 via iPhone   ❤️ 1
    还有这种的
    <div class="class-one.class-two"></div>
    noe132
        2
    noe132  
       2020-03-14 01:12:24 +08:00   ❤️ 1
    https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors

    带空格的是 Descendant combinator 用于选择后代元素
    不带空格就是 所有 Basic selectors 的交集
    Torpedo
        3
    Torpedo  
       2020-03-14 01:16:56 +08:00   ❤️ 2
    你居然才知道这个?果然单一知识点没啥大用。我感觉 v2 的前端挺不错的。很符合标准,性能啥也都挺好
    Livid
        4
    Livid  
    MOD
    OP
       2020-03-14 01:19:29 +08:00   ❤️ 9
    @Torpedo 你可能对这个世界有一种感觉就是,你觉得自己知道了的事情,全世界的其他人也就瞬间同步了。

    而我确实承认自己很多事情都不知道。
    Conte
        5
    Conte  
       2020-03-14 01:45:53 +08:00 via Android
    我大概是两个星期前才搞明白的🤣
    YuxiangLuo
        6
    YuxiangLuo  
       2020-03-14 01:46:58 +08:00   ❤️ 9
    I can't imagine that you built such a wonderful website without knowing this rule.
    Livid
        7
    Livid  
    MOD
    OP
       2020-03-14 01:49:45 +08:00
    @YuxiangLuo 谢谢。我打算接下来把我所有刚搞明白的事情都写出来分享一下。
    ETiV
        8
    ETiV  
       2020-03-14 01:53:45 +08:00 via iPhone
    这是四十而不惑了嘛……
    ericls
        9
    ericls  
       2020-03-14 02:17:28 +08:00 via iPhone   ❤️ 1
    感觉中国很多公司的招聘流程有很多可以优化的地方

    很多人会因为不知道这些 只需要 just in time 的知识而被刷掉
    Cbdy
        10
    Cbdy  
       2020-03-14 03:40:36 +08:00 via Android
    空格是后代选择器,>才是子元素选择器
    EvilCult
        11
    EvilCult  
       2020-03-14 03:45:19 +08:00 via iPhone
    这些个东西我一直都搞不太懂,所以平时用 less 尽量规避这些事儿 [手动捂脸] 。

    顺便,不知道我是不是记错了:
    这句好像会引发歧义(挑刺儿):“ 而中间有空格时,空格右边的元素必须是空格左边元素的子元素,规则才会生效。”
    貌似空格是对所有后代都生效(包括孙),尖括号才是只有子后代。貌似……
    yech1990
        12
    yech1990  
       2020-03-14 05:11:10 +08:00 via Android
    主要是很少会有人专门去看书学 CSS 语法,所以越简单的东西反而容易产生知识盲点。这个我是在写爬虫的时候一遍遍试明白的😂
    LittleWhiteMouse
        13
    LittleWhiteMouse  
       2020-03-14 07:49:14 +08:00   ❤️ 1
    中间加空格是后代元素,用子元素来描述还是有偏差的。

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

    子元素则必须是包含其中的,(在嵌套层面)紧邻的才可以;

    中间用 > 是子元素选择器,> 左右的空格可有可无。
    Perry
        14
    Perry  
       2020-03-14 08:01:29 +08:00
    这个东西系统学 css 的时候或者准备前端面试的时候才会知道。
    shabbyin
        15
    shabbyin  
       2020-03-14 08:07:28 +08:00 via iPhone
    这么想好了 空格表示子类 在一个类后面紧跟的选择器都是为了该类选择器添加筛选和权重罢了
    还有比如 . + . 这种语法也挺有意思
    bzw875
        16
    bzw875  
       2020-03-14 08:42:23 +08:00
    @Tang #1 5 年前端第一次知道这种写法
    manami
        17
    manami  
       2020-03-14 08:53:00 +08:00 via Android
    CSS 让人头疼,写不出好看样式的我
    wmc
        18
    wmc  
       2020-03-14 08:57:16 +08:00
    前端让人头大……

    N 年前刚学前端的时候,甚至很晚才弄明白 jQuery DOM 和原生 DOM 是不一样的,当时还觉得很疑惑为啥某个函数一会儿好使一会儿不好使🤣
    Felldeadbird
        19
    Felldeadbird  
       2020-03-14 09:29:06 +08:00 via iPhone
    第一个语法是全部元素匹配。
    第二个语法不是父子类(上下级关系)才生效。

    我一直是这么理解。
    Torpedo
        20
    Torpedo  
       2020-03-14 10:25:06 +08:00
    @Livid 我只是觉得,前几年,校招的面试必考这个。要是社招一个前端不知道这个,自然会思考他水平怎么样。但是,v2 各方面使用体验还是很好的。了解这个的重要作用不就是写网站么。

    想到了之前遇到的一些比较厉害的同事。他们知识点有欠缺,但是整体解决问题的能力都特别强
    kikyous
        21
    kikyous  
       2020-03-14 10:26:43 +08:00   ❤️ 3
    这是有多菜
    gouflv
        22
    gouflv  
       2020-03-14 10:39:18 +08:00 via iPhone
    学前端不去看 MDN 的文档 等于白学
    cmdOptionKana
        23
    cmdOptionKana  
       2020-03-14 10:43:09 +08:00   ❤️ 2
    @kikyous Livid 不知道这个知识点所以很菜,同时 Livid 做出了这个网站所以不菜,那么问题来了,Livid 菜不菜?

    考试 99 分的人做错了一题,考试 59 分的人做对的题里刚好包括前者做错那题,两者谁更菜?
    HuHui
        24
    HuHui  
       2020-03-14 10:47:47 +08:00 via Android
    面试大概率过不了吧😊
    oneisall8955
        25
    oneisall8955  
       2020-03-14 10:54:23 +08:00 via Android
    噗,jq 和 css 选择器,基操吧
    minglanyu
        26
    minglanyu  
       2020-03-14 10:55:42 +08:00
    @gouflv 我觉得我们都欠 MDN 一个会员
    maomaomao001
        27
    maomaomao001  
       2020-03-14 10:57:17 +08:00
    @Livid 这在这里提个建议,拉黑功能可不可以再增强一下, 拉黑后,评论折叠之类的 ,现在拉黑,直接楼层就对不上了 , 拉红 ,多个设备数据又不同步...
    望考虑
    woodensail
        28
    woodensail  
       2020-03-14 11:09:14 +08:00
    确切的说不光是类选择器,你可以中间不带空格的写一大堆选择器,用来指定一个元素,比如「 div.btn:first-child 」表示选择一个 class 包含'btn'的 div 标签,且该标签必须是其父节点的第一个子节点。
    然后空格则是表示后代,空格前后也可以选择使用任何单个或多个选择器的组合来筛选节点。
    adjusted
        29
    adjusted  
       2020-03-14 11:14:29 +08:00   ❤️ 1
    .class-one.class-one 优先级是高于 .class-one 的,有的时候会用来强制样式
    SteveZou
        30
    SteveZou  
       2020-03-14 11:38:43 +08:00 via Android
    哈哈哈,是不是相当于这个:大哥会造火箭,但是不知道螺丝是往哪个方向扭的😂
    Hoops
        31
    Hoops  
       2020-03-14 15:23:06 +08:00
    @Livid 我好想被降权很久了,什么时候可以在回来,每天都很活跃。
    Mutoo
        32
    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
        33
    cmdOptionKana  
       2020-03-14 15:39:52 +08:00
    话说,对于一个主攻后端的人来说,没有系统地学过 CSS,很正常吧,写前端页面的时候一般都是很散乱地现学现卖,一顿操作把想要的效果做出来就算了,不会全面、系统地去学前端,所以漏掉一些知识点也很容易理解啊。
    redam
        34
    redam  
       2020-03-14 15:44:22 +08:00
    说实话,要不是看到了你 id,我以为你在钓鱼 →→
    llb123
        35
    llb123  
       2020-03-14 15:53:03 +08:00
    @HuHui 面试不会问这么基础的,css 甚至都不怎么会问了
    Andy1999
        36
    Andy1999  
       2020-03-14 16:14:09 +08:00
    虽然 Livid 刚知道这个但是并不妨碍他日入数万 :)
    robinlovemaggie
        37
    robinlovemaggie  
       2020-03-14 18:33:43 +08:00
    CSS 于我时谜一样的存在~
    jugelizi
        38
    jugelizi  
       2020-03-14 18:55:55 +08:00
    好吧
    css 入门第一天老师就教的
    然后 这个描述并不准确
    WhatIf
        39
    WhatIf  
       2020-03-14 20:17:51 +08:00
    把逗号和大于号的作用和正文提到的两个放在一起记忆, 就容易多了
    ghostsf
        40
    ghostsf  
       2020-03-14 21:08:21 +08:00
    1. 连着写
    2. 逗号
    3. >
    4. 空格
    JCZ2MkKb5S8ZX9pq
        41
    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
        42
    dremy  
       2020-03-14 21:22:29 +08:00 via iPhone
    不考虑那些伪类 /伪元素选择器,普通的选择器都有十几种呢,并不只有.class 这么简单,当然也根本不难,只是普通的基础知识点罢了

    问题的原因就跟学 Java 直接从 spring 学起一样,必定是会遗漏很多细微的知识点的
    zhw2590582
        43
    zhw2590582  
       2020-03-14 22:34:58 +08:00
    五年前端的我,也对一大堆莫名其妙的 css 写法迷迷糊糊,不过不用再写兼容老浏览器的 hack 已经是很幸福的事了。
    Maxbee
        44
    Maxbee  
       2020-03-14 23:10:51 +08:00
    学习了
    Benisme
        45
    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
        46
    bigShrimp8577  
       2020-03-14 23:17:02 +08:00
    这不是入门第一天就该知道的吗(●—●)
    levon
        47
    levon  
       2020-03-14 23:32:11 +08:00
    首先,有空格的情况我相信 99.9%的写过 CSS 的人都知道怎么回事,楼主也 1000%知道这个。但没空格的情况我相信至少 90%的人没有用过,不知道根本不是什么问题。
    Canrz
        48
    Canrz  
       2020-03-15 00:22:02 +08:00
    @levon 没空格的用法还是比较常用的,某个元素处于选择或者激活状态,一般都是写成.class.active 或者.class.current 来加权,轮播图、导航条、菜单栏这些都会用到。
    levon
        49
    levon  
       2020-03-15 00:36:08 +08:00
    @Canrz 你说的 active,selected 这些临时添加的 class,常常也使用父元素来定位,不使用那种没空格的也完全没问题,除非你是天天写 css 的,不然根本不需要纠结这点东西
    Sapp
        50
    Sapp  
       2020-03-15 00:36:17 +08:00   ❤️ 1
    @levon 学 css 都不看文档的吗?随便搜 css 的文档,选择器里几乎前几个例子就必然有讲这个的,这个几乎是除了后代选择器之外的最常见的组合用法了,又不是藏得多深的东西,这年头写个东西连文档最前面最基础的一块都不愿意看,不是多正当的理由吧?
    widewing
        51
    widewing  
       2020-03-15 00:44:19 +08:00 via Android
    哈哈哈哈站长遭到群嘲真是活久见😆 说起来这个我一个后端➕运维都知道
    levon
        52
    levon  
       2020-03-15 00:45:47 +08:00
    @Sapp 你到现在为止有发现非用这种写法不可的地方吗
    levon
        53
    levon  
       2020-03-15 00:48:59 +08:00
    @Sapp 不使用这种不带空格的写法是会妨碍访问量还是妨碍访问速度
    hjzx050935
        54
    hjzx050935  
       2020-03-15 03:17:40 +08:00
    我觉得还蛮正常的,其实如果只是单纯想写个页面,不需要从头到尾把 CSS 吃透(虽然我刚开始看 CSS 也看到了这个😂)。

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

    想起来曾经面对一些无从下手的领域,我们不也是这样被逼着学了一点皮毛就开始干。最后出了 Bug 才拍拍脑袋说,WOC 这不就是基础吗?
    rainymorn
        55
    rainymorn  
       2020-03-15 04:38:53 +08:00
    看到这贴,突然想起这个知识以前就搞明白多次了,一直忘了就学,学了再忘,最近又要搞 css,头大中......
    Phariel
        56
    Phariel  
       2020-03-15 08:12:04 +08:00
    @Livid 其实关于 CSS 选择器权重问题,看这一篇就够了
    alligator.io/css/understanding-specificity-in-css/
    iConnect
        57
    iConnect  
       2020-03-15 09:26:14 +08:00 via Android
    社区里对这种小白问题很不友好,经常把提问的人喷到淹死。建议站长开个“小白”Node,友善一点
    cmdOptionKana
        58
    cmdOptionKana  
       2020-03-15 11:32:17 +08:00
    专写前端的人可能常用,但不是每个程序员都需要研究前端技术,很多人就是偶尔写少量简单的页面,大部分情况直接上 UI 库就搞定了,根本不需要按部就班看 CSS 教程。

    就算手写原生 CSS,只用单个 class,完全不用复合 class,不太复杂的页面也够用了(可能有些地方会麻烦一点,马上搜索一下照搬别人的,对于非专业前端来说,完成需求这件事就过去了,不深入学习才是常态吧)
    Alchemist13
        59
    Alchemist13  
       2020-03-17 09:56:58 +08:00
    好久没用过 CSS,都快忘了这个了,现在再看一下,应该又能记住一段日子 233
    ChanKc
        60
    ChanKc  
       2020-07-08 10:17:50 +08:00 via Android
    @ericls 程序员也分 aot 和 jit 吗(笑
    ericls
        61
    ericls  
       2020-07-08 10:52:36 +08:00
    @ChanKc 我觉得所有信息都有这个区别吧
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   5412 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 40ms · UTC 07:45 · PVG 15:45 · LAX 00:45 · JFK 03:45
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.