这是我的HTML:
<header id="banner" class="body">
<h1><a href="#">New UGS Project! <br><strong>This is the sub-title</strong></a></h1>
<nav><ul>
<li><a href="#">home</a></li>
<li><a href="#">portfolio</a></li>
<li><a href="#">blog</a></li>
<li><a href="#">contact</a></li>
</ul></nav>
</header><!-- /#banner -->
我的CSS:
#banner nav a:first-child:hover{
-moz-border-radius-topleft: 8px;
-webkit-border-top-left-radius: 8px;
-moz-border-radius-bottomleft: 8px;
-webkit-border-bottom-left-radius: 8px;
}
我想只选择第一个链接“home”来应用边框半径。我正在努力使用这个CSS3选择器......
答案 0 :(得分:6)
每个a
都包含在li
元素中,因此a
始终是其父li
的第一个(也是最后一个)子元素。您必须选择其父li
元素的第一个ul
。一些示例选择器:
#banner nav li:first-child a:hover {
#banner nav li:first-child:hover a {
#banner nav li:first-child:hover {
答案 1 :(得分:3)
您正在寻找的是:
#banner nav li:first-child a:hover {
-moz-border-radius-topleft: 8px;
-webkit-border-top-left-radius: 8px;
-moz-border-radius-bottomleft: 8px;
-webkit-border-bottom-left-radius: 8px;
}
答案 2 :(得分:1)
a
没有first-child
。 li
确实如此。
#banner nav ul > li a:first-child:hover{
-moz-border-radius-topleft: 8px;
-webkit-border-top-left-radius: 8px;
-moz-border-radius-bottomleft: 8px;
-webkit-border-bottom-left-radius: 8px;
}