Разница между #navlist li #current и #navlist li .current

Question

Я пытаюсь понять механизм CSS, но учебники до сих пор не были отличным источником.Они только царапают поверхность.

Мне нужно понять фундаментальные различия между использованием #navlist li #current и #navlist li .current.

Имена не являются общими, чтобы быть очень практичным примером.

То, что я думаю, отличается:

#navlist li #current

при применении к элементу li внутри родительского элемента #navlist будет пропускать любой унаследованный формат для отображения формата #navlist li #current.

С другой стороны:

#navlist li .current

будет применять свой формат, но также наследовать от другого формата.

В этом примере:

#navlist li a:hover
{
  color: #FFFFFF;
  background: #3364BB;
  border-color: #0F3974;
}

#navlist li .current
{
  color: #000;
  background: #FFFFFF;
  border-bottom: 1px solid #FFFFFF;
}

<ul id="navlist">
    <li><a href="#" class="current">Home</a></li>
    <li><a href="#">Profile</a></li>
    <li><a href="#">Destinations</a></li>
    <li><a href="#">Discuss</a></li>
</ul>

Вкладка будет белого цвета с черным шрифтом, но будет применено наведение.

В этом другом примере:

#navlist li a:hover
{
  color: #FFFFFF;
  background: #3364BB;
  border-color: #0F3974;
}

#navlist li #current
{
  color: #000;
  background: #FFFFFF;
  border-bottom: 1px solid #FFFFFF;
}

<ul id="navlist">
        <li><a href="#" id="current">Home</a></li>
        <li><a href="#">Profile</a></li>
        <li><a href="#">Destinations</a></li>
        <li><a href="#">Discuss</a></li>
</ul>

#current и ничего больше, оставляя вкладку белой даже при наведении мыши на нее.

Это правильно?

Answer 1

Это верно?

Да. Это потому, что a:hover более конкретно, чем .current, но меньше, чем #current. Таким образом, ваши стили наведения будут переопределять ваши стили классов, но ваши стили идентификаторов не будут затронуты.

a:hover более конкретен, чем .current, потому что он сочетает в себе селектор типа и селектор псевдокласса. Это выбивает селектор класса (хотя :hover и .current одинаково специфичны) из-за a.

#current более специфичен, чем a:hover, потому что идентификаторы всегда самые специфичные, даже если вы объединяете множество неидентификаторов в селекторе правила наведения стиля.

Answer 2

Да. (И, как говорит BoltClock, причина в специфичности)

Эта страница расскажет вам, как браузер прочитал ваш селектор CSS: http://www.css -101.org / потомок-селектор / go_fetch_yourself.php

запомните: идентификатор уникален, может использоваться только для 1 элемента; но класс может использоваться для более чем 1 элемента и тега

примечание: фактически оба правила выбирают один и тот же элемент и применяются. Если вы напишите больше в #navlist li a: hover, эти неперекрывающиеся элементы процветания появятся, если навести курсор мыши на #current (так называемый «каскадный»)

подробнее: некоторые ключевые слова / концепции, которые вам нужно знать: наследование / каскадирование, селектор CSS, специфичность CSS, псевдокласс

p.s. попробуйте jsbin / jsfiddle / cssdesk для теста css - учитесь на практике: D

Answer 3

Я думаю, что у вас есть некоторые синтаксические ошибки в вашем вопросе.Этот стиль:

#navlist li .current

будет нацелен на дочерний элемент вашей LI, например:

<ul id="navlist">
     <li>
          <a href="#" class="current">Foo</a>
     </li>
</ul>

Я предполагаю, что вы намереваетесь поместить класс илиИдентификатор «текущего» на самой LI.Если это так, ваше правило должно выглядеть примерно так:

#navlist li.current // между пробелами "li" и ".current" нет пробелов

Также помните, что идентификаторы "взвешены" больше, чем классыв CSS.Таким образом, если у вас есть два одинаково структурированных правила, но одно использует и ID, а другое использует класс, тогда правило ID превзойдет правило класса.Они ОБА применятся, но правило ИД будет применяться ПОСЛЕДНИМ.Это важно отметить, если вы делаете размер шрифта и тому подобное, где правила накапливаются, а не просто переопределяют друг друга.