多类选择器不起作用

时间:2012-09-06 17:36:28

标签: css html5 css-selectors background-image

我上下搜索试图找到一个解决方案,到目前为止没有任何工作。我有一个带有类的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之间放置一个空格,尝试更改类的顺序,没有修复它。我也尝试过试图覆盖盒子的宽度和高度,没有发生任何事情,这让我认为这是我的选择器,这是问题或与盒子阴影有关。

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

3 个答案:

答案 0 :(得分:2)

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

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

答案 1 :(得分:1)

如果你给了一个“.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”中的任何内容。

答案 2 :(得分:1)

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

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