当前位置: 首页 > 面试题库 >

CSS类.foo.bar(不带空格)和.foo .bar(带空格)有什么区别

闻人鸿文
2023-03-14
问题内容

您能否解释一下这两个CSS类语法之间的区别:

.element .symbol {}

.element.large .symbol {}

我不明白两者之间的区别。第一行指示两个不同的类,它们应用了相同的样式。但是关于第二个问题,写在“ .element”后面的“ .large”是什么意思?


问题答案:

我认为您对第一个含义有一些误解。

.element .symbol {}

意味着这些CSS设置将应用于该类的任何HTML元素,该HTML元素位于类.symbol的元素内.element

<div class="element">
    <div class="symbol" />
</div>

在此示例中,您的第一个CSS条目将影响<div>中间的标签。

您的第二个示例意味着第一类需要两个类才能受影响。除此之外,它等于第一个。

<div class="element large">
    <div class="symbol" />
</div>

因此,如果HTML看起来像这样,则CSS值也将应用于内部<div>标记。

如果要设置分别适用于多个类的CSS标签,则需要使用逗号将它们分开。所以看起来像这样:

.element, .symbol {}

编辑: 通过请求链接到CSS选择器的文档



 类似资料:
  • 问题内容: 使用BeautifulSoul和Python,我希望所有与给定类属性匹配的项都包含这样的多个名称: 我尝试了几种匹配该类的方法。正则表达式,通配符,但我总是得到一个空列表。 有什么方法可以使用正则表达式,通配符或如何匹配此类? 问题答案: 您可以使用CSS选择器来匹配许多类:

  • 问题内容: 使用这种语法有什么意义 这有什么区别 问题答案: 只会选择直接成为A的子级的B(也就是说,它们之间没有其他元素)。 将选择A内的任何B,即使它们之间还有其他元素也是如此。

  • 本文向大家介绍css中定义class时,中间有空格和没空格的区别是什么?相关面试题,主要包含被问及css中定义class时,中间有空格和没空格的区别是什么?时的应答技巧和注意事项,需要的朋友参考一下 没空格表示该元素需同时拥有这两个class 有空格表示第二个元素是第一个元素的后代

  • 尝试获取本页表格中的单个行:http://www.flashscore.com/match/n77wzKlQ/#match-summary 这是我目前掌握的代码...不起作用,因为类名有空格。我尝试过用。但是仍然没有运气。 代码:

  • 问题内容: 所以我正在尝试制作一个LESS mixin,它需要一个数字(旋转度)并输出正确的css来旋转元素。问题是,我想不出一种方法来为IE编写“ 270deg”和“ 3”(270/90)。这是我尝试过的事情: 现在,我刚刚修改了编译器脚本,以便在变量/关键字串联之间不留空格。我希望有更好的解决方案。 问题答案: 一种解决方案(尽管有点难看)将是使用转义的字符串: 请注意,您需要执行less.j

  • 问题内容: 我有一个大的字符串,我用换行符分隔。如何删除所有空行(仅限空白)? 伪代码: 问题答案: 使用正则表达式: 使用正则表达式+ : 如在键盘上所见。