使用 CSS 更改多个类的 div 颜色

Question

我是一名 CSS 初学者，尝试使用 custom.css 文件自定义我的 WordPress 博客。

我想改变一个 div 的颜色，但这个 div 有几个类：

<div class="container template-blog template-single-blog ">

如果我使用以下代码，它会更改至少具有这些类之一的所有 div 的背景，还是仅更改具有至少这 3 个类的 div 的背景？

.container .template-blog .template-single-blog { background-color: lightgreen; }

Answer 1

如果您有多个与元素关联的类，例如<div>，则这些类将仅针对该 div 元素。

但是，如果您的<div>类在其他任何地方使用，它就会将背景颜色更改为柠檬绿色。

如果您希望一个类针对一个元素并且不会在任何地方使用它，那么可以考虑使用 ids ( #unique)。

如果您想定位该元素，请考虑执行以下操作：

.container.template-blog.template-single-blog {
    background-color: lightgreen;
}

用法示例：http : //jsfiddle.net/kjLfq8b4/

.container.template-blog.template-single-blog {
    background-color: lightgreen;
}

div {
  margin-bottom: 40px;
}
#uniqueItem {
  color: red;
  border: 1px solid green;
}
.oneClass {
  background-color: blue;
  color: white;
}
.twoClass {
  padding: 10px;
}
.threeclass {
  text-decoration: underline;
}
.oneClass.twoClass.threeClass {
  height: 40px;
}