1

我有以下 LESS 格式的 CSS：

body {
  width: 100%;
  background: #F4F4F4 url("images/top_background.png") repeat-x top left;
  margin: 0px;

  > header {
    background: transparent url("images/header_logo.png") no-repeat center right;

    width: 960px;
    margin: 0px auto;

    > hgroup {
      float: left;

      height: 100px;

      padding: 0px;
      bottom: 40px;

      color: #FEFFFE;

      font-family: Arial, Helvetica, sans-serif;

      > h1 {
        line-height: 100px;

        font-size: 3.7em;
        text-transform: lowercase;

        float: left;
        margin: 0px;

        > a {
          color: #FEFFFE;
          text-decoration: none;
        }
      }
    }
  }

当编译成 CSS 时，它看起来像这样：

body {
  width:100%;
  background:#f4f4f4 url("images/top_background.png") repeat-x top left;
  margin:0px;
}
body > header {
  background:transparent url("images/header_logo.png") no-repeat center right;
  width:960px;
  margin:0px auto;
}
body > header > hgroup {
  float:left;
  height:100px;
  padding:0px;
  bottom:40px;
  color:#fefffe;
  font-family:Arial, Helvetica, sans-serif;
}
body > header > hgroup > h1 {
  line-height:100px;
  font-size:3.7em;
  text-transform:lowercase;
  float:left;
  margin:0px;
}
body > header > hgroup > h1 > a {
  color:#fefffe;
  text-decoration:none;
}

这似乎只符合<header>标签的样式。而且里面的元素都没有样式化。我的问题是，如何引用元素的子<header>元素？我的用法body > header > hgroup > h1 > a正确吗？

这是 HTML 内容。我省略了一些部分，但基本上这里是代码。

<body>
<header>
    <div id="header">
        <hgroup>
            <h1><a href="#">Website Title</a></h1>
        </hgroup>
        <div class="clearfix"></div>
        <nav>
            <ul id="topnav">
                <li><a href="#">Navigation 1</a></li>
                <li><a href="#">Navigation 2</a></li>
                <li><a href="#">Navigation 3</a></li>
                <li><a href="#">Navigation 4</a></li>
                <li><a href="#">Navigation 5</a></li>
                <li><a href="#">Navigation 6</a></li>
                <li><a href="#">Navigation 7</a></li>
            </ul>
        </nav>
        <div class="clearfix"></div>
    </div>
</header>
</body>
4

1 回答 1

1

哦，哇，那太愚蠢了。我没有意识到我以前使用过一个流氓 DIV，但忘记删除了。xD 通过删除带有 ID 的 div 解决了问题header。

于 2012-10-23T05:15:55.483 回答