css选择器带空格和不带空格的区别

╰+攻爆jí腚メ 2021-09-25 10:34 301阅读 0赞

之前写css的时候，没太注意css选择器里组合选择器里带空格和不带空格的差别，这次总结下

看下面的html代码

<body>
        <div id="containerDiv">
            <div id="form1" class="formDiv">111</div>
            <div id="form2" class="formDiv">222</div>
            <div>
                <div id="form3" class="formDiv">333</div>
            </div>
        </div>
        <div id="containerDiv2" class="formDiv">444</div>
    </body>

1.**\#containerDiv .formDiv** 选中的是id为containerDiv的元素里所有class含有formDiv的后代，

举例说明：上面的代码中，实际上就选中了div\#form1，div\#form2，div\#form3，这3个元素

其中div\#container和div\#form1，div\#form2是父子关系，div\#container和div\#form3是父孙关系，

实际上，只要是包含在div\#container里class含有formDiv，无论有多少层（只有一层的话，就是父子关系），都会被选中

**\#containerDiv>.formDiv**，只选中具有父子关系的，只到第1层

2.**\#containerDiv.formDiv** 选中的是id为containerDiv，同时class中含有formDiv的元素，显然上面没有这样的元素

**\#containerDiv2.formDiv** 是有的

总结：

带空格的，表示“后代”关系

不带空格，表示“且”的关系

参考链接：[https://www.cnblogs.com/shierfen/p/5342326.html][https_www.cnblogs.com_shierfen_p_5342326.html]

[https_www.cnblogs.com_shierfen_p_5342326.html]: https://www.cnblogs.com/shierfen/p/5342326.html

发表评论取消回复

表情：

评论列表（有 0 条评论，301人围观）

还没有评论，来说两句吧...

相关阅读

相关 scp命令：带/和不带/的区别

带`/` scp -r 172.16.x.xx:/etc/docker/ /etc/docker/ ![在这里插入图片描述][7340308c2d7744ca8

悠悠/ 2023年10月14日 15:23/ 0 赞/ 6 阅读

相关 elasticsearch nested object查询带空格

这里总结一个实践的case，是关于elasticsearch中对于nested object类型的查询 > 问题背景在保险业务中，存在投保人和被保人的概念，一般一个保单是

一时失言乱红尘/ 2022年12月31日 14:26/ 0 赞/ 102 阅读

相关带你学习css是什么和css中的选择器

前言欢迎观看~![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4u

深碍√TFBOYSˉ_/ 2022年12月27日 01:54/ 0 赞/ 69 阅读

相关 C++ 读取带空格字符串

最近在写天梯赛题目的时候，被一道题隐性的空格给坑到了。天梯赛模拟赛L1-6 检查密码，少了一个点没过。当时用的cin去读取string字符串，没想到密码里会出现空格

傷城~/ 2022年12月22日 04:51/ 0 赞/ 126 阅读

相关 css中空格选择器的权重,CSS中选择器的权重值

CSS 选择器权重值 CSS 具有自己的优先级计算方法，而不仅仅是行间>内部>外部、ID>class>元素 1. 样式类型行间样式我的行间CSS样式。内联样

冷不防/ 2022年09月02日 14:52/ 0 赞/ 174 阅读

相关 JQuery里的子元素过滤选择器，加空格与不加空格的区别

最近学习jquery，发现它的选择器的写法与css的基本语法很像，加不加空格差别很大。 $(“:first-child)——：first只是返回单个元素，而first-ch

红太狼/ 2022年08月21日 00:26/ 0 赞/ 128 阅读

相关 css选择元素时有没有空格的区别

HTML文档是一棵树的结构，各元素以一种层次结构为基础构成‘树’的视图。文档树中的每个元素，要么是另一个元素的父元素，要么是另一个元素的子元素，这样，各元素之间就形成了‘父子关

电玩女神/ 2022年08月19日 12:29/ 0 赞/ 128 阅读

相关输出不带空格的字符串拷贝字符串（空格除外）

程序代码 include <stdio.h> / csdn学院--2016级目的：让代码见证成长(作为一个初学的菜鸟，如大家有发现

￡神魔★判官ぃ/ 2022年06月13日 07:52/ 0 赞/ 219 阅读

相关 css选择器带空格和不带空格的区别

之前写css的时候，没太注意css选择器里组合选择器里带空格和不带空格的差别，这次总结下看下面的html代码 <body> <div id="c

╰+攻爆jí腚メ/ 2021年09月25日 10:34/ 0 赞/ 302 阅读

相关 CSS后代选择器“空格”和“>”的使用辨析

要点： 1. “空格”：包含子孙 2. “>”：含子不含孙举个栗子： html代码如下 <body> <div class="pa

ゞ浴缸里的玫瑰/ 2021年07月04日 20:30/ 0 赞/ 508 阅读