Ориентация на вложенные элементы с помощью 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; }

Ответы на вопрос(5)

Решение Вопроса

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

Тогда в вашем вложенном HTML, вы можете сделать что-то вроде

.someclass a.link {font-size:8px} сделать этот текст меньше.

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

чтобы определенная ссылка отличалась от остальных, вам необходимо добавить к ней некоторый вес.

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

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

 18 мая 2012 г., 13:06
Это может привести к очень серьезному случаю классицизма, который IMO не стоит пытаться сбрасывать на миллисекунды, который даже не добавляет времени, потраченного на ввод одного символа.

и другое совершенно верно, и то, что вы используете, зависит от того, что вы хотите сделать.

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

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

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

Сказать, что & quot;.link самый лучший,a.link второй лучший, а длинный селектор плохой & quot; это просто неправильно. Все зависит от ситуации.

 18 мая 2012 г., 13:02
Я должен отозвать вас за последнее предложение. Наслаждайтесь вашей новой привилегией редактирования!

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

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

 18 мая 2012 г., 13:01

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

Ваш ответ на вопрос