使用 CSS 更改类名称中的空格答案

【问题标题】：Altering classes using CSS with spaces in the class name使用 CSS 更改类名称中的空格
【发布时间】：2014-05-23 23:45:23
【问题描述】：

如何更改 CSS 中类名中有空格的类？

我想改变这个类：

<div class="navbar-collapse collapse">

如何在 CSS 文件中选择它？

.navbar-collapse collapse{

}

似乎不起作用。

【问题讨论】：

标签： html css twitter-bootstrap ruby-on-rails-4

【解决方案1】：

您看到的空格表示 div 元素有多个类，而不是类名中的空格。

您可以在 CSS 中使用 .navbar-collapse 或 .collapse 定位此元素。

如果你只想影响两个类的元素，你可以使用.navbar-collapse.collapse。

.navbar-collapse {
  // CSS for elements with a class of 'navbar-collapse'.
}

.collapse {
  // CSS for elements with a class of 'collapse'.
}

.navbar-collapse.collapse {
  // CSS for elements with a class of both 'navbar-collapse' and 'collapse'.
}

【讨论】：

这是正确的目标，但没有解决他想要学习的内容。

【解决方案2】：

1) 类中没有空格。可能的命名约定有：foo-bar(hyphen)、fooBar(camelCased)、foo_bar (snake case)，或者只是 foobar。

给定：

  <div class="navbar-collapse collapse">

CSS 目标：

.navbar-collapse.collapse

你写的空间会说collapse是一个子节点，所以选择div collapse，它是navbar-collapse的子节点，标记类似于：

 <div class="navbar-collapse">
    <div class="collapse">foo</div>
 </div>

Pro 使用不同的命名约定来表示不同的事物。每个团队都不同，但通常围绕这个：

我喜欢在我的 css 类中使用连字符：foo-bar
ids 的 Snake_case：#foo_bar
我从不使用驼峰式 css，但有人这样做是为了表明这个类是用 Javascript 编写的。
如果我的一个开发人员写了一个两个字的 css 类密钥，他会被取笑。

【讨论】：

问题中的写法实际上是指不存在的元素collapse，而不是具有collapse类的div。
@NathanDawson 我不是用
foo
不完全。次要细节，但您输入了<div class="collapse">（带有折叠元素的 div）。它的编写方式实际上意味着一个元素，collapse（当然不存在）。例如。 <div class="navbar-collapse"><collapse>