Сократите разделенные запятыми CSS-селекторы

Question

Возможно, название этого вопроса неоднозначно, что я действительно имею в виду:

#footer_list li a:link, #footer_list li a:visited
{
    blah balh blah
}

Есть ли ярлык для двух элементов в CSS? таким образом, CSS-селекторы могут быть сокращены

Answer 1

Конечно.Если вы дадите им каждому свое имя класса / идентификатора.Но это не нужно.Код, который у вас есть, вполне приемлем, так как CSS - это Каскадные таблицы стилей, правила каскадно снижаются.

Answer 2

Ваш код в порядке, как есть.Я разрабатывал свои сайты с помощью таких селекторов, и это не смутило ни меня, ни браузеры.

Если на вашем сервере работает Ruby, и вы не против подобрать «расширение» на стороне сервера дляСтандартный синтаксис CSS, МЕНЬШЕ предоставляет вложенные правила, так что вы можете сделать что-то вроде этого:

#footer_list li {
    a:link {
        /* Styles for normal links */
    }
    a:visited {
        /* Styles for visited links */
    }
}

---

ОК, я не уверен, что это изменит, но я 'Я уверен, что браузеры будут обрабатывать его по-разному:

#footer_list li a {
    /* Styles */
}

Затем вы можете разместить дополнительные селекторы a с классами или a:hover или a:active ниже этого значения, и они будут работать, когда это применимо.

Answer 3

У вас есть ссылки в #footer_list, которые не входят в li элементы? У вас есть другие списки в нижнем колонтитуле?

Я представляю, что у вас есть что-то вроде этого в вашей разметке:

<div id="footer">
    <p>&copy; me 2010</p>
    <ul id="footer_list">
        <li><a href="/home">Home</a></li>
        <li><a href="/contact">Contact</a></li>
        <li>....
    </ul>
    <p>Some other text...</p>
</div>

В этом случае ваше правило требует только:

#footer a:link, #footer a:visited

Если у вас есть (или, возможно, позже), есть ссылки вне ul, которые вы хотите по-другому оформить, вы можете сделать:

#footer_list a:link, #footer_list a:visited