Question

<body>
  <div id="header">
    <div id="header_center">
      <div class="logo"></div>
    </div>

我想使用以下CSS：

#header#header_center.logo {
  float:left;
  background-image: url(images/logo.png);
  background-repeat: no-repeat; 
  width: 297px;
  height: 85px;
}

......但它不起作用。如果我只使用'.logo'那就可以了。为什么我不能使用'＃header＃header_center.logo'？

Answer 1

您发布的CSS将选择一个如下所示的元素：

<div id="header header_center" class="logo"></div>

您需要做的是在选择器之间添加空格，以便选择嵌套元素。

#header #header_center .logo { ...

Answer 2

在class和id之间插入空格并关闭你的一个div标签

#header #header_center .logo {
    float:left;
    background-image: url(images/logo.png);
    background-repeat: no-repeat; 
    width: 297px;
    height: 85px;
}

你的HTML应该是

<div id="header">
        <div id="header_center">          
            <div class="logo"></div></div></div>

Answer 3

你需要在这样的ids /类之间留一个空格：

#header #header_center .logo {
    ...
}

不留空格会为具有所有这些属性的单个元素指定一个css挂钩（显然是错误的，因为每个元素上不能有多个id属性）

Answer 4

尝试#header #header_center .logo

CSS - 如何按ID和按类使用

4 个答案: