Селектора классов CSS

Я больше человек на стороне сервера, поэтому для примера css ниже я понимаю, что делают первые 2 группы селекторов css.Селектора классов CSS

Я не понимаю третьего.

Учитывая, что домашний класс встречается только один раз в html, кажется лишним указать класс дважды. Это происходит с сайта clearleft.com. Какова цель последней группы селекторов?

Заранее спасибо.

<ol id="nav"> 
    <li class="home"><a href="/">Home</a></li> 
</ol> 

#nav li.home a, 
#nav li.home a:link, 
#nav li.home a:visited { 
    background-position: 0 0; 
} 

#nav li.home a:hover, 
#nav li.home a:focus, 
#nav li.home a:active { 
    background-position: 0 -119px; 
} 

.home #nav li.home a, 
.home #nav li.home a:link, 
.home #nav li.home a:visited, 
.home #nav li.home a:hover, 
.home #nav li.home a:focus, 
.home #nav li.home a:active { 
    background-position: 0 -238px; 
}

источник

2009-06-09 Steve

Большинство из вас правы, я не опубликовал полный html. Я понял причину. Существует тег родительского div с именем домашнего класса. Он используется для выделения выбранного пункта меню для данной страницы. Извините за путаницу, но ответы действительно привели меня к проверке страниц, кроме той, которую я использовал, что привело меня к ответу.

Спасибо всем.

источник

2009-06-09 03:43:17 Steve

Я не думаю, что это избыточно, просто неправильно. Может быть, результат какой-то очистки css, который закончился в коде, или что-то в этом роде?

Из вашего html-кода объект #nav никогда не появляется внутри объекта класса .home, поэтому третий оператор CSS ничего не будет соответствовать.

источник

2009-06-09 03:07:39

Последний набор будет соответствовать только элементу 'a', который является дочерним элементом элемента домашнего класса, дочерним элементом элемента id навигатора элемента li с домашним классом.

Зачем вам это нужно:

1) Там может быть селектор еще одно правило, что перекрывает #nav li.home правило, в определенных случаях. Например:

.home #nav li.home a 
vs 
.interior #nav li.home a

2) У вас также может быть другой селектор, который менее разбирается. Например

#nav li a

Выше предполагает, что есть другой HTML (возможно, на других страницах), что все они используют один и тот же файл CSS.

Редактировать - Еще одна мысль: поскольку фоновые позиции трех наборов селекторов различны, я предполагаю, что они обрабатывают случаи #nav в трех разных стилях страниц. И селектора необходимы, чтобы правила работали только на соответствующих страницах.

источник

2009-06-09 03:08:21

Разве ваш № 1 не так? .home появляется внутри #nav в html-коде в вопросе, а не наоборот. –

Я согласен с вами в отношении кода html, который вы показываете. Если отображаемый html - это единственный раз, когда #nav используется на любой странице. Также может быть, что страницы динамически генерируются, а иногда элемент nav находится в другом контексте. И это также может быть css cruft из предыдущих версий сайта. Главное, чтобы отметить (как вы знаете), что класс может появляться несколько раз в html. Но идентификаторы должны быть уникальными для каждой страницы (но не для каждого сайта). –

.home #nav li.home a

Это означает: The anchor в list-item, который имеет класс home в nav идентификатор, который снова внутри класса home. Я думаю, что CSS ошибочен.

источник

2009-06-09 03:11:03

Или где-то в коде есть вторая комбинация, любым способом +1 за неправильное. –

ваше объяснение здесь нет. Элемент #nav является * внутри * элементом класса home, он не * имеет * этот класс. – nickf

Спасибо, ник. У меня есть: s/снова/снова внутри/в моем сообщении. Ты прав. –

Если вы установили <body class="home"> или <div class="home"> в качестве родительского контейнера в меню, вы можете контролировать внешний вид меню на этой странице или в этом div.

<div class="home"> 
    <ol id="nav"> 
    <li class="home"> 
      <a href="/">Home</a> 
    </li> 
    </ol> 
</div>

Я думал, что это можно применить к подменю каскадного стиля; например

<ol id="nav"> 
    <li class="home"> 
     <a href="/">Home</a> 
     <ul id="nav"> 
      <li><a href="#">SubNav</a></li> 
     </ul> 
    </li> 
</ol>

Хотя это не совсем имеет смысла, более becuase идентификатор #nav используется дважды, когда идентификаторы могут быть использованы только один раз за один документ.

источник

2009-06-09 03:12:10 garrow

Эта группа селекционеров выберет

ссылки (< а > элементы) в любом из состояний: посещенные, парения, фокус, .....
, где (1) является потомком элементом li элемента с class=home
, где (2) является потомком элементом элемента с id=nav
где (3) является потомком элемента из элемента с class=home

Ваш образец HTML не содержит элементов, соответствующих этим условиям, поэтому ничего не будет выбрано.

источник

2009-06-09 03:20:04

Я делаю это все время, чтобы выделить текущую страницу в меню, не добавляя класс «текущий». Это полезно, если вы, например, используйте php для меню. clearleft's навигации выглядит следующим образом

<ol id="nav"> 
    <li class="home"><a href="/">Home</a></li> 
    <li class="who-we-are"><a href="/is/">Who we are</a></li> 
    <li class="what-we-do"><a href="/does/">What we do</a></li> 
    <li class="stuff-we-made"><a href="/made/">Stuff we made</a></li> 
    <li class="work-with-us"><a href="/canhelp/">Work with us</a></li> 
</ol>

И body для разных страниц выглядит следующим образом

<body id="index" class="home"> 
<body id="index" class="who-we-are"> 
<body id="index" class="what-we-do"> 
etc.

Примечание - только видел, как ты отправил ответ на себя, пока я писал, но я по-прежнему включают в себя это.

источник

2009-06-09 03:47:40 Eystein

Селектора классов CSS

ответ

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