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>
我們可以看到你的HTML嗎?您當前的樣式將只適用於'
添加了上面的HTML代碼。 :) – Propeller
其實我設法解決它我自己,謝謝你要求我複製HTML。我通過檢查發現了我的錯誤。的xD – Propeller