Ориентация вложенных элементов с помощью CSS

Скажем, у меня есть некоторая глубоко вложенная разметка, на которую я хочу настроить CSS. Это может быть что угодно, но, например:

<div>
    <div id='someid'>
        <span class='someclass'>
            <a class='link' href='alink'>Go somewhere</a>
        </span>
    </div>
<div>

Можно ли написать правило CSS, ориентированное непосредственно на тег <a>, например?

a.link { font-size: large; }

Или это считается нестандартным, который может не работать в некоторых браузерах? Нужно ли мне нацеливать каждый элемент в цепочке следующим образом?

div div span.someclass a.link { font-size: large; }

Ответ 1

Оба полностью приемлемы для использования, и ответ зависит от вашего конкретного решения. Например, если у вас есть другие области, в которых вы используете общие свойства, определенные этим классом, вы хотите сохранить его как можно более общим. Если, например, у вас есть навигация, и ссылки в этой области имеют общие элементы, которые могут быть определены a.link

Затем в вашем вложенном html вы можете сделать что-то вроде

.someclass a.link {font-size:8px}, чтобы уменьшить текст.

Вот статья, в которой обсуждается, как работает конкретность: http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/

Ответ 2

Оба абсолютно корректны, и какой из них вы используете, зависит от того, что вы хотите сделать.

Если вы создаете общий класс, который хотите использовать на всем сайте, независимо от его элемента и где находится элемент, вы должны использовать только .class. Хорошим примером для этого является нечто вроде .icon, которое вы можете использовать для ссылок, элементов списка, заголовков и т.д. И вы хотите, чтобы их можно было использовать везде.

Если вы создаете класс, специфичный для работы только одного элемента определенного типа, лучше использовать элемент в селекторе. Примером этого может быть список маркеров, которые вы хотите отобразить в одной строке, так как для этого класса HTML должен быть <ul>, вы должны указать его и в CSS; ul.inline. Таким образом, вы можете использовать имя класса "inline" для других элементов, без стилей, влияющих на оба.

Если вы используете только этот класс, чтобы выбрать элемент, но он не должен иметь никакого общего стиля, вы должны быть конкретным. Например, вы можете захотеть, чтобы первый абзац в элементе #blog-post был больше, тогда вы должны указать как #blog-post, так и класс; #blog-post p.first (обратите внимание, что эти типы классов редко нужны больше благодаря расширенным селекторам, таким как :first-of-type, h2 + p и т.д.).

Говоря, что ".link является лучшим, a.link является вторым лучшим, а длинный селектор - плохим" - это просто неправильно. Все зависит от ситуации.

Ответ 3

Чем больше вы настроите свой CSS, тем менее он становится менее гибким. Это ваш собственный компромисс. Если вы дадите ссылки конкретному классу, я уверен, что они будут визуально одинаковыми, появляются ли они внутри этого дерева или вне его, поэтому вы можете придерживаться своего первого примера.

Ответ 4

Фактически рекомендуется использовать a.link вместо длинной, уродливой второй опции, которая может вызвать проблемы с конкретностью и производительностью.

Это даже лучше, если вы используете только .link. Это лучший вариант.

Ответ 5

a.link - лучший способ сделать это. Если вы хотите, чтобы определенный a.link отличался от остальных, вам нужно добавить к нему некоторый вес.

a.link { ... } /* Global */
span.someclass a.link { ... } /* Finds all a.link within span.someclass */

Селекторы потомков (строка 2) не являются наиболее эффективным способом добавления стиля к элементу, поэтому используйте их экономно. Лично я использую их, когда мне нужно предоставить специальные стили для глобального класса в пределах определенного идентификатора/класса.