CSS первоочередной селектор не работает должным образом - PullRequest
0 голосов
/ 05 ноября 2011

Вот мой 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 ...

Ответы [ 3 ]

6 голосов
/ 05 ноября 2011

Каждый 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 {
3 голосов
/ 05 ноября 2011

То, что вы ищете, это:

#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;
}
1 голос
/ 05 ноября 2011

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;
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...