我有以下 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> 的 child ？元素？我的用法是 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>
最佳答案
哦，哇，那太蠢了。我没有意识到我有一个我以前使用过的流氓 DIV，但忘记删除了。 xD 通过删除 ID 为 header 的 div 解决了问题。
关于css - 在 CSS/LESS 中选择 child 的 child ？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/13023840/