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 に答える