2012-10-23 51 views
1

我在LESS格式如下CSS:在CSS/LESS中選擇小孩的孩子?

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> 
+0

我們可以看到你的HTML嗎?您當前的樣式將只適用於'

'沒有任何這些元素之間的任何嵌套。 – BoltClock

+0

添加了上面的HTML代碼。 :) – Propeller

+0

其實我設法解決它我自己,謝謝你要求我複製HTML。我通過檢查發現了我的錯誤。的xD – Propeller

回答

1

哦哇,那很愚蠢。我沒有意識到我曾經使用過一個流氓DIV,並忘記刪除它。 xD問題通過刪除ID爲header的div來解決。