Разница между ".class" и ".class,.class.class"?

Следующая выдержка из документации PrimeFaces показывает, что существует разница между двумя селекторами, описанными в названии:

.ui-widget, .ui-widget .ui-widget {
     font-size: 90% !important;
}

Может кто-нибудь объяснить значение второго селектора ( ".ui-widget.ui-widget" ) для меня? Я понимаю, что он соответствует элементам класса "ui-widget", которые сами являются дочерними элементами других элементов одного и того же класса, но не будут ли они уже выбраны первым селектором?

Ответы

Ответ 1

Изменить. Как отмечают @Robin Kanters и другие, здесь есть небольшая разница с добавлением специфичности селектора .class.class. (Это можно увидеть здесь)

В противном случае селектор .class.class является избыточным.

.ui-widget {
     font-size: 90% !important;
}

и

.ui-widget, .ui-widget .ui-widget {
     font-size: 90% !important;
}

дают те же результаты.

FIDDLE

В приведенной выше скрипте вы можете видеть, что одного селектора .ui-widget достаточно для получения рекурсивного наследования размера шрифта.

Ответ 2

когда .ui-widget находится в .ui-widget (поэтому нет комбинированного селектора), тогда размер шрифта будет 90% 90%, с селектором .ui-widget .ui-widget, он устанавливается вначале до 90% используя! important

Это будет делать две вещи:

  • установить размер шрифта компонентов с классом ui-widget до 90% (из родительский)
  • установить размер шрифта компонентов с помощью класса ui-widget и дети другого компонента с классом ui-widget до 90% (из родительский)

причина .ui-widget .ui-widget требовалась в стандартном CSS, чтобы предотвратить обратную проблему: размер шрифта увеличивается во вложенных ui-виджетах.

Без стиля, определенного для .ui-widget .ui-widget, стиль font-size: 90% по умолчанию, применяемый к .ui-widget, приводит к увеличению размера шрифта во вложенном ui-widgets.

Добавив более специфичный селектор .ui-widget .ui-widget с размером шрифта, установленным на 90%, вы убедитесь, что вы получите согласованный размер шрифта, независимо от того, насколько глубоко вы вставляете свои компоненты.

Ответ 3

Это важно. Если в некоторых файлах css есть некоторые другие правила CSS, это может потребоваться для переопределения этих общих правил для определенных элементов. Рассмотрим этот сценарий.

Здесь у нас есть другое Div и другое правило css.

Смотрите демонстрацию с .class.class и demo без .class.class. В таких сценариях это имеет значение. Чтобы переопределить некоторые другие общие правила css

<div class="ui-widget">
    single
</div>

<div class="ui-widget">
    parent
    <div class="ui-widget">
        child
    </div>
</div>

<div>
    <div class="ui-widget">
        child
    </div>
</div>

CSS

.ui-widget, .ui-widget .ui-widget {
     font-size: 150% !important;
}

div .ui-widget{
     font-size: 20% !important;
}

Ответ 4

Примечание. Я использую смешные размеры шрифтов в этом примере, чтобы упростить математику.

Предположим, что у вас был базовый размер шрифта от 100px.

HMTL

<div class="ui-widget">
    <div class="ui-widget"></div>
</div>

Если у вас есть правило

.ui-widget { 
    font-size 90% !important; 
}

Родительский .ui-виджет будет иметь размер шрифта 90px (90% от 100px).
У дочернего .ui-виджета будет размер шрифта 81px (90% от 90px).

С правилом

.ui-widget, .ui-widget .ui-widget { 
    font-size 90% !important;
}

И родительский, и дочерний .ui-widget будут иметь размер шрифта 90px