2013-11-29 5 views
3

В чем разница между .some_class{} и *.some_class{}.CSS - Что означает звездочка перед классом?

Означает ли это, что класс применяется только к тегам, которые находятся внутри другого тега, или нет никакой разницы?

+1

Это невероятно. Сначала у вас возникают вопросы с вопросом «что означает * перед имуществом», и люди, отвечающие «это означает универсальный селектор», и теперь у вас возникают вопросы с вопросом «что означает * перед селектором классов», а люди говорят, что это хак IE. – BoltClock

ответ

3

Там нет никакой разницы между ними вообще. Если вы не укажете тип элемента, например div или p, то есть ли у вас * или нет, не имеет значения. Даже если вы это оставите, подразумевается, что вы хотите соответствовать любому элементу, если у него есть класс some_class. Из spec:

Если универсальный селектор представлены * (т.е. без префикса пространства имен) не является единственным компонентом последовательности простых селекторов селекторов или сразу после псевдо-элемента, то * может опускаться и подразумевать присутствие универсального селектора.

Примеры:

  • *[hreflang|=en] и [hreflang|=en] эквивалентны,
  • *.warning и .warning эквивалентны,
  • *#myid и #myid эквивалентны.

Что вы описываете в терминах элементов, находящихся внутри других элементов применяется только тогда, когда * отделяется от класса пробелом, например, * .some_class. Это соответствует элементу класса some_class, только если он находится внутри другого элемента (в основном это означает, что он никогда не будет соответствовать корневому элементу).

И принимая приведенное выше объяснение относительно *, подразумевая, что это сделает селектор с пространством, также эквивалентным * *.some_class. Здесь вы можете видеть, что используются два универсальных селектора, разделенные комбинатором. Второй - просто необязательный, поскольку он уже квалифицирован селектором классов (первый не является необязательным, поскольку он существует сам по себе).

+0

Интересно, что хром делает разницу между этими двумя случаями. У меня есть сгенерированный html-файл с сгенерированным css, где все классы добавляются со звездочкой. Но когда я удаляю звездочки, файл, созданный в хроме, выглядит совершенно иначе. Я не могу загрузить файл в любом месте, но когда у меня будет время, я попытаюсь привести пример. В IE 10 файл с звездочками и без них выглядит так же, как и файл без звездочек в хроме. – Jardo

4

Существует нет разностной не видят here

Универсальный селектор, записываемый «*», совпадает с именем любого типа элемента. Он соответствует любому отдельному элементу в дереве документов.

Если универсальный селектор не является единственным компонентом простого селектора, «*» может быть опущен. Например:

*[lang=fr] and [lang=fr] are equivalent. 
*.warning and .warning are equivalent. 
*#myid and #myid are equivalent. 
+1

Что? Это не свойство. – BoltClock

+0

@ BoltClock - единорог. Я соглашаюсь на вводящее в заблуждение использование терминологии в цитируемой статье, позвольте мне заменить ее на лучшую. – SW4

+2

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

0

Предполагая, что перед классом идет id (#id.класс):

нет никакой разницы между сдачей astherisc или нет, потому что asterisc означает, что CSS будет применяться к любому идентификатору с этим классом, то есть то же самое, что положить класс withouth astherisc:

// This style will be applied to anybody that has the attribute class="my_class" 
.my_class{ 
} 

// This class will be applied to anybody to any id that also has the attribute class="my_class" 
*.my_class{ 
} 

Надеюсь, это поможет!

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