CSS Nth Selector - неожиданный результат

<div id="quicklinks"> 
    <div class="sidenav-header"> 
     <h3>Quick Links</h3> 
    </div> 

    <a href="/link-to-page-one">Link One</a> 
    <a href="/link-to-page-two">Link Two</a> 
</div>

В приведенном выше коде у меня есть две ссылки. Кажется, он обращается к стилю второй ссылки в этом кодовом блоке, мне нужно настроить таргетинг на третий элемент. Мой CSS обращается к <a> тегу хотяCSS Nth Selector - неожиданный результат

#quicklinks { 
    height:120px; 
} 
#quicklinks a { 
    display:block; 
    color:#fff; 
    text-align:left; 
    background:#92d050; 
    margin:6px 12px; 
    padding:10px 12px; 
    text-decoration:none; 
    border-radius:3px; 
    font-weight:normal; 
} 
#quicklinks a:nth-child(3) { 
    background:#ff9900; 
}

Почему мой nth-child установлен в # 3, чтобы осуществить 2-й элемент?

источник

2015-08-31 Groovefactory

nth-child(3) выбирает третий дочерний элемент любого типа, включая ваш элемент <div class="sidenav-header">. Вы должны использовать a:nth-of-type(2), чтобы выбрать 2-й дочерний элемент типа a

источник

2015-08-31 16:22:44 gtlambert

Кажется странным, что объявляется , поэтому кажется, что тип уже выбран. Это просто игнорирование объявления в имени класса? Спасибо @ lambo477 за ваш ответ. – Groovefactory

«Селектор nth-child (n) соответствует каждому элементу, который является n-м дочерним, независимо от типа его родителя». http://www.w3schools.com/cssref/sel_nth-child.asp. Так, например, если вы использовали CSS-селектор 'a: nth-child (1)', ни один элемент HTML не будет выбран - просто потому, что не существует элемента привязки, который является первым дочерним элементом его родителя. Это имеет смысл @Groovefactory? – gtlambert

Да, это имеет смысл, просто интересно, чья идея состояла в том, чтобы сделать это поведение по умолчанию, lol, теперь я вижу, где они описывали сценарии с этими вариациями на селекторах. Еще раз спасибо. – Groovefactory

CSS Nth Selector - неожиданный результат

ответ

Смежные вопросы