Question

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

我想改变这个类：

<div class="navbar-collapse collapse">

如何在CSS文件中选择它？

.navbar-collapse collapse{

}

似乎不起作用。

Answer 1

你看到的空格意味着div元素有多个类而不是类名中的空格。

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

如果您只想影响两个类的元素，请使用.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'.
}

Answer 2

1）课堂上没有空格。可能的命名约定是：foo-bar（连字符），fooBar（camelCased），foo_bar（蛇案例）或只是foobar。

鉴于：

  <div class="navbar-collapse collapse">

CSS目标：

.navbar-collapse.collapse

你编写它的方式会说崩溃是一个子节点，所以选择div折叠作为navbar-collapse的子节点，这个标记会类似：

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

Pro使用不同的命名约定来表示不同的东西。 Everyteam是不同的，但通常围绕着这个：

我喜欢在我的css类中使用连字符：foo-bar
ids的Snake_case：#foo_bar
我从来没有骆驼案例，但有些人这样做是为了表示这个类是用Javascript编写的。
如果我的一个开发人员写了两个单词的css类密钥，他就会被取笑。

使用CSS在类名中使用空格来更改类

2 个答案: