Lensby Arxo
Скачать JSON
Вопрос Сохранённый разбор

Два объявления претендуют на одно свойство. Как каскад решает спор через слои, важность, происхождение и специфичность селектора?

Каскад — не «кто специфичнее», а лестница критериев. Среди обычных объявлений побеждает более поздний слой, но у важных объявлений порядок слоёв переворачивается, и выигрывает более ранний. Объявление вне слоёв бьёт слоевое даже при меньшей специфичности. Сама специфичность сравнивается покомпонентно, слева направо, и лишь при полном равенстве спор решает порядок в документе. Каждый шаг здесь — отдельное выведенное утверждение спецификации, а не эвристика браузера.

Это пояснение ассистента, а не результат расчёта. Проверяйте выводы по основаниям и источникам ниже.

Результаты

6

Проверка условия

Обычное: побеждает более поздний слой

Установлено

Параметры запроса · 2
winner
urn:case:css:d:l14
loser
urn:case:css:d:r14
Исходные факты · 31

  • declaration is among the declarations the case records

    d: l14

  • declaration belongs to a style sheet that currently applies to this document

    d: l14

  • every conditional rule qualifying the declaration has a true condition

    d: l14

  • the declaration's property is a known property name

    d: l14

  • the declaration's value matches the syntax for that property

    d: l14

  • declaration belongs to a style rule whose selector matches the element

    d: l14e: target

  • declaration declares this property

    d: l14p: color

  • declaration is sourced from this encapsulation context

    d: l14encapsulation: light-dom

  • specificity of the style rule the declaration appears in, as computed by the Selectors module

    d: l14a: 0b: 0c: 1

  • position of the declaration in document order

    d: l14position: 1

  • declaration has this cascade origin

    d: l14origin: Author Origin: style sheets specified for a source document according to the conventions of the document language

  • declaration is mapped by means of a style rule selector

    d: l14

  • declaration is explicitly assigned to this cascade layer

    d: l14layer: theme

  • declaration is among the declarations the case records

    d: r14

  • declaration belongs to a style sheet that currently applies to this document

    d: r14

  • every conditional rule qualifying the declaration has a true condition

    d: r14

  • the declaration's property is a known property name

    d: r14

  • the declaration's value matches the syntax for that property

    d: r14

  • declaration belongs to a style rule whose selector matches the element

    d: r14e: target

  • declaration declares this property

    d: r14p: color

  • declaration is sourced from this encapsulation context

    d: r14encapsulation: light-dom

  • specificity of the style rule the declaration appears in, as computed by the Selectors module

    d: r14a: 0b: 0c: 1

  • position of the declaration in document order

    d: r14position: 2

  • declaration has this cascade origin

    d: r14origin: Author Origin: style sheets specified for a source document according to the conventions of the document language

  • declaration is mapped by means of a style rule selector

    d: r14

  • declaration is explicitly assigned to this cascade layer

    d: r14layer: reset

  • layer is declared using a @layer block at-rule

    layer: reset

  • layer is not defined inside a conditional group rule

    layer: reset

  • the first layer is first declared before the second in the layer order of its origin and context

    early: resetlate: theme

  • layer is declared using a @layer block at-rule

    layer: theme

  • layer is not defined inside a conditional group rule

    layer: theme
Почему такой результат? →Источники: 15

Среди обычных объявлений слой, объявленный позже, старше.

Проверка условия

Важное: побеждает более ранний слой

Установлено

Параметры запроса · 2
winner
urn:case:css:d:r15
loser
urn:case:css:d:l15
Исходные факты · 33

  • declaration is among the declarations the case records

    d: r15

  • declaration belongs to a style sheet that currently applies to this document

    d: r15

  • every conditional rule qualifying the declaration has a true condition

    d: r15

  • the declaration's property is a known property name

    d: r15

  • the declaration's value matches the syntax for that property

    d: r15

  • declaration belongs to a style rule whose selector matches the element

    d: r15e: target

  • declaration declares this property

    d: r15p: color

  • declaration is sourced from this encapsulation context

    d: r15encapsulation: light-dom

  • specificity of the style rule the declaration appears in, as computed by the Selectors module

    d: r15a: 0b: 0c: 1

  • position of the declaration in document order

    d: r15position: 1

  • declaration has this cascade origin

    d: r15origin: Author Origin: style sheets specified for a source document according to the conventions of the document language

  • the last two non-whitespace, non-comment tokens in the declaration's value are the delimiter token ! followed by the identifier token important

    d: r15

  • declaration is mapped by means of a style rule selector

    d: r15

  • declaration is explicitly assigned to this cascade layer

    d: r15layer: reset

  • declaration is among the declarations the case records

    d: l15

  • declaration belongs to a style sheet that currently applies to this document

    d: l15

  • every conditional rule qualifying the declaration has a true condition

    d: l15

  • the declaration's property is a known property name

    d: l15

  • the declaration's value matches the syntax for that property

    d: l15

  • declaration belongs to a style rule whose selector matches the element

    d: l15e: target

  • declaration declares this property

    d: l15p: color

  • declaration is sourced from this encapsulation context

    d: l15encapsulation: light-dom

  • specificity of the style rule the declaration appears in, as computed by the Selectors module

    d: l15a: 0b: 0c: 1

  • position of the declaration in document order

    d: l15position: 2

  • declaration has this cascade origin

    d: l15origin: Author Origin: style sheets specified for a source document according to the conventions of the document language

  • the last two non-whitespace, non-comment tokens in the declaration's value are the delimiter token ! followed by the identifier token important

    d: l15

  • declaration is mapped by means of a style rule selector

    d: l15

  • declaration is explicitly assigned to this cascade layer

    d: l15layer: theme

  • layer is declared using a @layer block at-rule

    layer: reset

  • layer is not defined inside a conditional group rule

    layer: reset

  • the first layer is first declared before the second in the layer order of its origin and context

    early: resetlate: theme

  • layer is declared using a @layer block at-rule

    layer: theme

  • layer is not defined inside a conditional group rule

    layer: theme
Почему такой результат? →Источники: 14

Для важных объявлений порядок слоёв обратный — это отдельное правило, а не исключение из предыдущего.

Проверка условия

Вне слоёв бьёт слоевое

Установлено

Параметры запроса · 2
winner
urn:case:css:d:audio
loser
urn:case:css:d:audio-controls
Исходные факты · 28

  • declaration is among the declarations the case records

    d: audio

  • declaration belongs to a style sheet that currently applies to this document

    d: audio

  • every conditional rule qualifying the declaration has a true condition

    d: audio

  • the declaration's property is a known property name

    d: audio

  • the declaration's value matches the syntax for that property

    d: audio

  • declaration belongs to a style rule whose selector matches the element

    d: audioe: target

  • declaration declares this property

    d: audiop: display

  • declaration is sourced from this encapsulation context

    d: audioencapsulation: light-dom

  • specificity of the style rule the declaration appears in, as computed by the Selectors module

    d: audioa: 0b: 0c: 1

  • position of the declaration in document order

    d: audioposition: 1

  • declaration has this cascade origin

    d: audioorigin: Author Origin: style sheets specified for a source document according to the conventions of the document language

  • declaration is mapped by means of a style rule selector

    d: audio

  • declaration is not assigned to any explicit cascade layer

    d: audio

  • declaration is among the declarations the case records

    d: audio-controls

  • declaration belongs to a style sheet that currently applies to this document

    d: audio-controls

  • every conditional rule qualifying the declaration has a true condition

    d: audio-controls

  • the declaration's property is a known property name

    d: audio-controls

  • the declaration's value matches the syntax for that property

    d: audio-controls

  • declaration belongs to a style rule whose selector matches the element

    d: audio-controlse: target

  • declaration declares this property

    d: audio-controlsp: display

  • declaration is sourced from this encapsulation context

    d: audio-controlsencapsulation: light-dom

  • specificity of the style rule the declaration appears in, as computed by the Selectors module

    d: audio-controlsa: 0b: 1c: 1

  • position of the declaration in document order

    d: audio-controlsposition: 2

  • declaration has this cascade origin

    d: audio-controlsorigin: Author Origin: style sheets specified for a source document according to the conventions of the document language

  • declaration is mapped by means of a style rule selector

    d: audio-controls

  • declaration is explicitly assigned to this cascade layer

    d: audio-controlslayer: reset

  • layer is declared using a @layer block at-rule

    layer: reset

  • layer is not defined inside a conditional group rule

    layer: reset
Почему такой результат? →Источники: 15

Объявление вне слоёв выигрывает, даже когда его специфичность ниже.

Проверка условия

Специфичность: первая компонента

Установлено

Параметры запроса · 2
winner
urn:case:css:d:s17a
loser
urn:case:css:d:s17b
Исходные факты · 26

  • declaration is among the declarations the case records

    d: s17a

  • declaration belongs to a style sheet that currently applies to this document

    d: s17a

  • every conditional rule qualifying the declaration has a true condition

    d: s17a

  • the declaration's property is a known property name

    d: s17a

  • the declaration's value matches the syntax for that property

    d: s17a

  • declaration belongs to a style rule whose selector matches the element

    d: s17ae: target

  • declaration declares this property

    d: s17ap: color

  • declaration is sourced from this encapsulation context

    d: s17aencapsulation: light-dom

  • specificity of the style rule the declaration appears in, as computed by the Selectors module

    d: s17aa: 1b: 0c: 0

  • position of the declaration in document order

    d: s17aposition: 1

  • declaration has this cascade origin

    d: s17aorigin: Author Origin: style sheets specified for a source document according to the conventions of the document language

  • declaration is mapped by means of a style rule selector

    d: s17a

  • declaration is not assigned to any explicit cascade layer

    d: s17a

  • declaration is among the declarations the case records

    d: s17b

  • declaration belongs to a style sheet that currently applies to this document

    d: s17b

  • every conditional rule qualifying the declaration has a true condition

    d: s17b

  • the declaration's property is a known property name

    d: s17b

  • the declaration's value matches the syntax for that property

    d: s17b

  • declaration belongs to a style rule whose selector matches the element

    d: s17be: target

  • declaration declares this property

    d: s17bp: color

  • declaration is sourced from this encapsulation context

    d: s17bencapsulation: light-dom

  • specificity of the style rule the declaration appears in, as computed by the Selectors module

    d: s17ba: 0b: 9c: 9

  • position of the declaration in document order

    d: s17bposition: 2

  • declaration has this cascade origin

    d: s17borigin: Author Origin: style sheets specified for a source document according to the conventions of the document language

  • declaration is mapped by means of a style rule selector

    d: s17b

  • declaration is not assigned to any explicit cascade layer

    d: s17b
Почему такой результат? →Источники: 14

Сравнение идёт покомпонентно: первая же различающаяся компонента решает спор.

Проверка условия

Специфичность: третья компонента

Установлено

Параметры запроса · 2
winner
urn:case:css:d:s19a
loser
urn:case:css:d:s19b
Исходные факты · 26

  • declaration is among the declarations the case records

    d: s19a

  • declaration belongs to a style sheet that currently applies to this document

    d: s19a

  • every conditional rule qualifying the declaration has a true condition

    d: s19a

  • the declaration's property is a known property name

    d: s19a

  • the declaration's value matches the syntax for that property

    d: s19a

  • declaration belongs to a style rule whose selector matches the element

    d: s19ae: target

  • declaration declares this property

    d: s19ap: color

  • declaration is sourced from this encapsulation context

    d: s19aencapsulation: light-dom

  • specificity of the style rule the declaration appears in, as computed by the Selectors module

    d: s19aa: 1b: 1c: 2

  • position of the declaration in document order

    d: s19aposition: 1

  • declaration has this cascade origin

    d: s19aorigin: Author Origin: style sheets specified for a source document according to the conventions of the document language

  • declaration is mapped by means of a style rule selector

    d: s19a

  • declaration is not assigned to any explicit cascade layer

    d: s19a

  • declaration is among the declarations the case records

    d: s19b

  • declaration belongs to a style sheet that currently applies to this document

    d: s19b

  • every conditional rule qualifying the declaration has a true condition

    d: s19b

  • the declaration's property is a known property name

    d: s19b

  • the declaration's value matches the syntax for that property

    d: s19b

  • declaration belongs to a style rule whose selector matches the element

    d: s19be: target

  • declaration declares this property

    d: s19bp: color

  • declaration is sourced from this encapsulation context

    d: s19bencapsulation: light-dom

  • specificity of the style rule the declaration appears in, as computed by the Selectors module

    d: s19ba: 1b: 1c: 1

  • position of the declaration in document order

    d: s19bposition: 2

  • declaration has this cascade origin

    d: s19borigin: Author Origin: style sheets specified for a source document according to the conventions of the document language

  • declaration is mapped by means of a style rule selector

    d: s19b

  • declaration is not assigned to any explicit cascade layer

    d: s19b
Почему такой результат? →Источники: 14

Когда первые две равны, дело доходит до третьей.

Проверка условия

Порядок в документе как последний довод

Установлено

Параметры запроса · 2
winner
urn:case:css:d:o20b
loser
urn:case:css:d:o20a
Исходные факты · 26

  • declaration is among the declarations the case records

    d: o20b

  • declaration belongs to a style sheet that currently applies to this document

    d: o20b

  • every conditional rule qualifying the declaration has a true condition

    d: o20b

  • the declaration's property is a known property name

    d: o20b

  • the declaration's value matches the syntax for that property

    d: o20b

  • declaration belongs to a style rule whose selector matches the element

    d: o20be: target

  • declaration declares this property

    d: o20bp: color

  • declaration is sourced from this encapsulation context

    d: o20bencapsulation: light-dom

  • specificity of the style rule the declaration appears in, as computed by the Selectors module

    d: o20ba: 0b: 0c: 1

  • position of the declaration in document order

    d: o20bposition: 2

  • declaration has this cascade origin

    d: o20borigin: Author Origin: style sheets specified for a source document according to the conventions of the document language

  • declaration is mapped by means of a style rule selector

    d: o20b

  • declaration is not assigned to any explicit cascade layer

    d: o20b

  • declaration is among the declarations the case records

    d: o20a

  • declaration belongs to a style sheet that currently applies to this document

    d: o20a

  • every conditional rule qualifying the declaration has a true condition

    d: o20a

  • the declaration's property is a known property name

    d: o20a

  • the declaration's value matches the syntax for that property

    d: o20a

  • declaration belongs to a style rule whose selector matches the element

    d: o20ae: target

  • declaration declares this property

    d: o20ap: color

  • declaration is sourced from this encapsulation context

    d: o20aencapsulation: light-dom

  • specificity of the style rule the declaration appears in, as computed by the Selectors module

    d: o20aa: 0b: 0c: 1

  • position of the declaration in document order

    d: o20aposition: 1

  • declaration has this cascade origin

    d: o20aorigin: Author Origin: style sheets specified for a source document according to the conventions of the document language

  • declaration is mapped by means of a style rule selector

    d: o20a

  • declaration is not assigned to any explicit cascade layer

    d: o20a
Почему такой результат? →Источники: 14

При полном равенстве побеждает последнее объявление в документе.

Как сослаться

Снимок неизменяем: его закрепляет SHA-256 скачиваемого JSON, поэтому дата обращения не нужна.

Текст ссылки
«Два объявления претендуют на одно свойство. Как каскад решает спор через слои, важность, происхождение и специфичность селектора?». Arxo Lens, по состоянию на 06.09.2026. https://lens.arxo.io/a/a_BxJJ9C7lEPlGjAxdsAGubVQJ. SHA-256 снимка: 91c051244f839f3b83de5571e0e191dc6fed2487817fbd7b86faf85925402a4a.
BibTeX
@misc{arxo-lens-a_BxJJ9C7lEPlG,
  title = {Два объявления претендуют на одно свойство. Как каскад решает спор через слои, важность, происхождение и специфичность селектора?},
  howpublished = {Arxo Lens},
  url = {https://lens.arxo.io/a/a_BxJJ9C7lEPlGjAxdsAGubVQJ},
  note = {по состоянию на 06.09.2026; SHA-256 91c051244f839f3b83de5571e0e191dc6fed2487817fbd7b86faf85925402a4a}
}
Код для вставки

Карточка показывает результат и ведёт к полному разбору; cookies не ставит.

<iframe src="https://lens.arxo.io/embed/a_BxJJ9C7lEPlGjAxdsAGubVQJ?lang=ru" width="100%" height="390" loading="lazy" title="Каскад CSS: какое объявление побеждает и почему — Arxo Lens" style="border:0"></iframe>

Анонимная статистика посещений, без cookies.