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>类，则会将背景颜色更改为浅绿色。

如果你想让一个类定位一个元素并且不打算在任何地方使用它，那么可以考虑id（#unique）。

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

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

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

＆＃13;

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;
}

＆＃13;

<div id="uniqueItem">This is a unique Item</div>

<div class="oneClass">This is one class</div>

<div class="oneClass twoClass threeClass">This is multiple classes</div>

＆＃13;

Answer 2

删除类名之间的空格：

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

这意味着只有当标签与所有三个类匹配时才会应用此样式。

Answer 3

您的CSS选择器实际上是这样的： “class'template-single-blog'，其祖先具有类'template-blog'，其祖先具有类容器”

最好的选择是为该div添加一个类，并为该类创建一个CSS规则：

.new-class {
  background-color: lightgreen;
}

如果添加一个类不是一个选项，你应该尝试说“一个包含所有这些类的div”。它是这样写的：

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

Answer 4

要使用其中一个类名更改所有div的颜色，您需要在类名之间添加逗号，如下所示：

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

如果没有逗号，则不会有任何改变。

Answer 5

什么都不会改变。您已在标记中选择了模板单博客类：

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

    </div>
  </div>
</div>

只需更改其中一个类的背景，如果没有覆盖它就会有效。

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

或者更好地添加一个新类 .background-single-blog { 背景色：浅绿色; }

Answer 6

使用您给定的标记：

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

这种风格：

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

不会影响任何事情。样式声明所说的是： “对于具有类container的所有元素，其具有类template-blog的后代元素，其中包含具有类template-single-blog元素的子元素，请使用类{{}更改元素的背景1}}。

您可以使用以下内容更改div的背景：

template-single-blog element

哪个会在整个网站上使用.template-single-blog { background-color: lightgreen; }类更改所有元素，无论他们是否有其他类。

如果您想更具体，可以这样做：

.template-single-blog

这将改变那些所有三个类的元素。

使用CSS

6 个答案: