Question

我上下搜索试图找到一个解决方案，到目前为止没有任何工作。我有一个带有类的section元素，它在站点的主页上重复。唯一的区别是背景图像的变化。我无法显示背景图像。经过一些修修补补后，似乎无法让我的选择器得到认可。

以下是一个例子：

主页上的HTML框

<section class="maincontent"></section>

投资组合页面上的HTML框

<section class="maincontent port"></section>

CSS

.maincontent {
width: 860px;
height: 540px;
margin: 50px;
padding: 0;
background-color: #000;
-moz-box-shadow: 7px 7px 7px rgba(0,0,0,0.6);
-webkit-box-shadow: 7px 7px 7px rgba(0,0,0,0.6);
box-shadow: 7px 7px 7px rgba(0,0,0,0.6);
}
.maincontent.port {
background: url(../images/portduck.jpg) no-repeat top;
}

我尝试使用#port的ID而不是多个类，尝试在.maincontent和.port之间放置一个空格，尝试更改类的顺序，没有修复它。我也尝试过试图覆盖盒子的宽度和高度，没有发生任何事情，这让我认为这是我的选择器，这是问题或与盒子阴影有关。

非常感谢任何帮助。谢谢！

Answer 1

1-确保图像路径正确（将鼠标悬停在开发人员工具中的URL等，或检查网络面板）。

2-尝试将display：block添加到该类的CSS中。

Answer 2

如果你给了一个“.maincontent .port”的选择器（注意它们之间的空格），那么为了匹配这个，你必须有一个带有“maincontent”类的标签，并嵌套在里面你必须有一个标签“端口”类，如

<div class="maincontent">
  <p class="port">
  ... whatever ...
  </p>
</div>

如果您希望单个标记获取两个类的属性，请使这些类不相关，然后将两个类名称用空格分隔。

CSS:
.maincontent {... whatever ...}
.port {... whatever ...}

HTML:
<div class="maincontent port">

我不确定当你同时给出背景色和背景图时会发生什么。如果它们发生冲突，一件容易的事就是将背景颜色分解为另一个类，然后调用适当的组合。另一种选择是在背景图像中添加“！important”。这告诉系统给它一个更高的优先级。此外，一般规则是较长的说明符链优先于较短的链，因此“.maincontent .port”应该胜过“.maincontent”中的任何内容。

Answer 3

.maincontent.port的css会覆盖背景颜色，并将其设置为默认值（透明）。如果你想继承.maincontent的黑色背景颜色，你需要这样做：

.maincontent.port {
    background-image: url(../images/portduck.jpg)
    background-repeat: no-repeat;
}

多类选择器不起作用

3 个答案: