Что такое правильный порядок выбора CSS?например, p.class или .class p

Question

При отладке некоторых CSS я заметил, что есть разница между этим порядком объявления. Первое заставило заголовки внутри якорей отображать inline, как хотелось бы, второе, кажется, не:

1/ a.aname { display:inline; margin:0px;}
2/ .aname a { display:inline; margin:0px;}

<a name="download" class="aname"><h2>Download</h2></a>

В основном я использовал вторую форму для применения стилей класса. В чем разница в том, как они применяются, и есть ли какие-либо руководящие правила, когда их использовать? (чтобы избежать css-головоломки, которая возникает, когда она сделана неправильно)

---

Базовое решение из ответов:

Используйте «прямой выбор» elementtype.class{} или elementtype#id{} для непосредственного применения стиля к элементам. Для стиля, который предназначен для воздействия один раз каждый раз, когда используется правило, например. изменение полей, изменение отображения, изменение шрифта без наследования. Прямой выбор не наследует дочерние элементы, он применяется только к родительскому элементу.

Используйте «выбор потомков» .class elementtype{} или #id elementtype, чтобы применить стиль к типу потомков / потомков именованного или классифицированного элемента. Для стиля, который предназначен для изменения внешнего вида типов элементов под элементом / в разделе страницы, где он применяется, например. наследование изменений шрифта в текстовых разделах, наследование изменений формата абзацев или элементов списка. Выбор потомка применяется ко всем дочерним элементам, но не к родительским элементам.

NBself: узнайте о других селекторах слишком быстро;)

Answer 1

Разница - это расстояние между ними, которое является потомком комбинатора в CSS.

Селектор a.aname будет сопоставлять элемент привязки с классом aname, тогда как .aname a будет сопоставлять элемент привязки, являющийся потомком элемента с классом aname:

<a class="aname">This matches the first rule</a>

<span class="aname"><a>This matches the second rule</a></span>

CSS-комбинаторы:

space = descendant combinator

> = child combinator (direct descendant)

+ = adjacent sibling combinator

Selectutorial дает довольно хороший обзор или селекторов и комбинаторов.

Если вы используете селекторы, где вы можете соединять идентификаторы без комбинаторов между ними, порядок не имеет значения. Пример:

#id.class { ... }
.class#id { ... }