Question

我有以下少量格式的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>

Answer 1

哇，哇，这太愚蠢了。我没有意识到我有一个我之前使用的流氓DIV而忘了删除。 xD通过删除ID为header的div来解决问题。

在CSS / LESS中选择孩子的孩子？

1 个答案: