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

{
  "contentHash": "sha256:1032e4306c7274d3ee0bbf2523002057a0add9365c58f88f61d8982aa5b8b8bc",
  "edition": "urn:w3c:clir:css-cascade#CSS_CASCADE_5_EN",
  "fragmentKind": "section",
  "id": "urn:w3c:clir:css-cascade#CSS_S4",
  "kind": "fragment",
  "locator": "section/4",
  "package": "urn:w3c:clir:css-cascade",
  "texts": [
    {
      "contentHash": "sha256:51b78361fbdaeb78dfb2656060149b495574c0a69c5117d568c79834578936a7",
      "language": "en",
      "status": "official",
      "text": "4. Value Processing\nOnce a user agent has parsed a document and constructed a document tree,\nit must assign,\nto every element in the tree,\nand correspondingly to every box in the formatting structure,\na value to every property that applies to the target media type.\nThe final value of a CSS property for a given element or box\nis the result of a multi-step calculation:\nFirst, all the declared values applied to an element are collected,\nfor each property on each element.\nThere may be zero or many declared values applied to the element.\nCascading yields the cascaded value.\nThere is at most one cascaded value per property per element.\nDefaulting yields the specified value.\nEvery element has exactly one specified value per property.\nResolving value dependencies yields the computed value.\nEvery element has exactly one computed value per property.\nFormatting the document yields the used value.\nAn element only has a used value for a given property\nif that property applies to the element.\nFinally, the used value is transformed to the actual value based on constraints of the display environment.\nAs with the used value, there may or may not be an actual value for a given property on an element.\nElements that are not connected or are not part of the document’s flattened element tree do not participate in CSS value processing,\nand do not have declared, cascaded, specified, computed, used, or actual values,\neven if they potentially have style declarations assigned to them\n(for example, by a style attribute)."
    }
  ]
}

{
  "contentHash": "sha256:d3eb77b85d6f380950eabb8264aa1292b4b06e78160c509b51a08cd11ef66b75",
  "edition": "urn:w3c:clir:css-cascade#CSS_CASCADE_5_EN",
  "fragmentKind": "section",
  "id": "urn:w3c:clir:css-cascade#CSS_S4_1",
  "kind": "fragment",
  "locator": "section/4_1",
  "package": "urn:w3c:clir:css-cascade",
  "texts": [
    {
      "contentHash": "sha256:72a3f831fcd5599e111a8de28258297f64f0b10d33b7985e18764d786198cbe6",
      "language": "en",
      "status": "official",
      "text": "4.1. Declared Values\nEach property declaration applied to an element contributes a declared value for that property\nassociated with the element.\nSee Filtering Declarations for details.\nThese values are then processed by the cascade to choose a single “winning value”."
    }
  ]
}

{
  "contentHash": "sha256:680967c0335bc170bb1d3eed857cbdf65e0844c28cdb882b06f955b18b290de3",
  "edition": "urn:w3c:clir:css-cascade#CSS_CASCADE_5_EN",
  "fragmentKind": "section",
  "id": "urn:w3c:clir:css-cascade#CSS_S4_2",
  "kind": "fragment",
  "locator": "section/4_2",
  "package": "urn:w3c:clir:css-cascade",
  "texts": [
    {
      "contentHash": "sha256:728fbf4896aa8d75ffa250decd97924c873b11dbb4feb9298215b8b007ad9772",
      "language": "en",
      "status": "official",
      "text": "4.2. Cascaded Values\nThe cascaded value represents the result of the cascade:\nit is the declared value that wins the cascade\n(is sorted first in the output of the cascade).\nIf the output of the cascade is an empty list,\nthere is no cascaded value."
    }
  ]
}

{
  "contentHash": "sha256:18572a052bae5476779611907414d7f2bb328c5a50cac975f43175a6a8b65832",
  "edition": "urn:w3c:clir:css-cascade#CSS_CASCADE_5_EN",
  "fragmentKind": "section",
  "id": "urn:w3c:clir:css-cascade#CSS_S4_3",
  "kind": "fragment",
  "locator": "section/4_3",
  "package": "urn:w3c:clir:css-cascade",
  "texts": [
    {
      "contentHash": "sha256:2eef2e76916e9205133507a43183a478b65d604a0290247af7c8b16590ce4fa1",
      "language": "en",
      "status": "official",
      "text": "4.3. Specified Values\nThe specified value is\nthe value of a given property that the style sheet authors intended for that element.\nIt is the result of putting the cascaded value through the defaulting processes,\nguaranteeing that a specified value exists for every property on every element.\nIn many cases, the specified value is the cascaded value.\nHowever, if there is no cascaded value at all,\nthe specified value is defaulted.\nThe CSS-wide keywords are handled specially\nwhen they are the cascaded value of a property,\nsetting the specified value as required by that keyword,\nsee § 7.3 Explicit Defaulting."
    }
  ]
}

{
  "contentHash": "sha256:4250c835138ba865333b025adf054873db60d185e1cd5c5f9be5a8802f18cbb8",
  "edition": "urn:w3c:clir:css-cascade#CSS_CASCADE_5_EN",
  "fragmentKind": "section",
  "id": "urn:w3c:clir:css-cascade#CSS_S5",
  "kind": "fragment",
  "locator": "section/5",
  "package": "urn:w3c:clir:css-cascade",
  "texts": [
    {
      "contentHash": "sha256:b845fde7eebcda9f0d16fb5b642544b38844d58b48c032bbd643d1b6c22ac12c",
      "language": "en",
      "status": "official",
      "text": "5. Filtering\nIn order to find the declared values,\nimplementations must first identify all declarations that apply to each element.\nA declaration applies to an element if:\nIt belongs to a style sheet that currently applies to this document.\nIt is not qualified by a conditional rule [CSS-CONDITIONAL-3] with a false condition.\nIt belongs to a style rule whose selector matches the element. [SELECT] (Taking scoping into account, if necessary.)\nIt is syntactically valid:\nthe declaration’s property is a known property name,\nand the declaration’s value matches the syntax for that property.\nThe values of the declarations that apply form,\nfor each property on each element,\na list of declared values.\nThe next section,\nthe cascade,\nprioritizes these lists."
    }
  ]
}

{
  "contentHash": "sha256:da05d1967ed9d40f006a13cba7727b772a337fbb1bfe6b33fec74b6263ac4082",
  "edition": "urn:w3c:clir:css-cascade#CSS_CASCADE_5_EN",
  "fragmentKind": "section",
  "id": "urn:w3c:clir:css-cascade#CSS_S6",
  "kind": "fragment",
  "locator": "section/6",
  "package": "urn:w3c:clir:css-cascade",
  "texts": [
    {
      "contentHash": "sha256:4df89230801a772d0581dcf402d0a775977299ee375b80984bc1b6e8e9ec4730",
      "language": "en",
      "status": "official",
      "text": "6. Cascading\nThe cascade takes an unordered list of declared values for a given property on a given element,\nsorts them by their declaration’s precedence as determined below,\nand outputs a single cascaded value."
    }
  ]
}

{
  "contentHash": "sha256:62ff4952c56b4dcbc0912c044a09065a4f8e433b7abc2a86a833401fd4b9984b",
  "edition": "urn:w3c:clir:css-cascade#CSS_CASCADE_5_EN",
  "fragmentKind": "section",
  "id": "urn:w3c:clir:css-cascade#CSS_S6_1",
  "kind": "fragment",
  "locator": "section/6_1",
  "package": "urn:w3c:clir:css-cascade",
  "texts": [
    {
      "contentHash": "sha256:b479a434611fc00c1da90099fa4c87ef1a3edb45ff9b0594585cb95c6d6cdb9d",
      "language": "en",
      "status": "official",
      "text": "6.1. Cascade Sorting Order\nThe cascade sorts declarations according to the following criteria,\nin descending order of priority:\nOrigin and Importance\nThe origin of a declaration is based on where it comes from\nand its importance is\nwhether or not it is declared with !important (see below).\nThe precedence of the various origins is, in descending order:\nTransition declarations [css-transitions-1]\nImportant user agent declarations\nImportant user declarations\nImportant author declarations\nAnimation declarations [css-animations-1]\nNormal author declarations\nNormal user declarations\nNormal user agent declarations\nDeclarations from origins earlier in this list win over declarations from later origins.\nContext\nA document language can provide for blending declarations sourced\nfrom different encapsulation contexts,\nsuch as the nested tree contexts of shadow trees in the [DOM].\nWhen comparing two declarations\nthat are sourced from different encapsulation contexts,\nthen for normal rules\nthe declaration from the outer context wins,\nand for important rules\nthe declaration from the inner context wins.\nFor this purpose, [DOM] tree contexts are considered to be nested\nin shadow-including tree order.\nNote: This effectively means that normal declarations belonging to an encapsulation context can set defaults that are easily overridden by the outer context,\nwhile important declarations belonging to an encapsulation context can enforce requirements that cannot be overridden by the outer context.\nElement-Attached Styles\nSeparately for normal and important declarations,\ndeclarations that are attached directly to an element\n(such as the contents of a style attribute)\nrather than indirectly mapped by means of a style rule selector\ntake precedence over declarations the same importance that are mapped via style rule.\nSee [css-style-attr].\nNote: Non-CSS presentational hints (such as presentational markup)\nare handled separately,\nsee § 6.5 Precedence of Non-CSS Presentational Hints.\nLayers\nDeclarations within each origin and context can be explicitly assigned to a cascade layer.\nFor the purpose of this step,\nany declaration not assigned to an explicit layer\nis added to an implicit final layer.\nCascade layers (like declarations) are ordered by order of appearance.\nWhen comparing declarations that belong to different layers,\nthen for normal rules the declaration whose cascade layer is last wins,\nand for important rules the declaration whose cascade layer is first wins.\nNote: This follows the same logic used for layering normal and important origins,\nso that the !important flag maintains the same “override” purpose in both settings.\nSpecificity\nThe Selectors module [SELECT] describes how to compute the specificity of a selector.\nEach declaration has the same specificity as the style rule it appears in.\nThe declaration with the highest specificity wins.\nOrder of Appearance\nThe last declaration in document order wins.\nFor this purpose:\nStyle sheets are ordered as in final CSS style sheets.\nDeclarations from imported style sheets are ordered as if their style sheets were substituted in place of the @import rule.\nDeclarations from style sheets independently linked by the originating document\nare treated as if they were concatenated in linking order,\nas determined by the host document language.\nDeclarations from style attributes\nare ordered according to the document order of the element the style attribute appears on,\nand are all placed after any style sheets.\nThe output of the cascade is a (potentially empty) sorted list of declared values for each property on each element."
    }
  ]
}

{
  "contentHash": "sha256:6b324eff99852d174a60d90a89f75215e7e87210bf5a156817effa2ddc4c8294",
  "edition": "urn:w3c:clir:css-cascade#CSS_CASCADE_5_EN",
  "fragmentKind": "section",
  "id": "urn:w3c:clir:css-cascade#CSS_S6_2",
  "kind": "fragment",
  "locator": "section/6_2",
  "package": "urn:w3c:clir:css-cascade",
  "texts": [
    {
      "contentHash": "sha256:f221ab39ebcc687e320a2336486650aa7543c9dfa742283a4214efe27251040b",
      "language": "en",
      "status": "official",
      "text": "6.2. Cascading Origins\nEach style rule has a cascade origin,\nwhich determines where it enters the cascade.\nCSS defines three core origins:\nAuthor Origin\nThe author specifies style sheets for a source document\naccording to the conventions of the document language.\nFor instance, in HTML,\nstyle sheets may be included in the document or linked externally.\nUser Origin\nThe user may be able to specify style information for a particular document.\nFor example, the user may specify a file that contains a style sheet\nor the user agent may provide an interface that generates a user style sheet\n(or behaves as if it did).\nUser-Agent Origin\nConforming user agents must apply a default style sheet\n(or behave as if they did).\nA user agent’s default style sheet should present the elements of the document language\nin ways that satisfy general presentation expectations for the document language\n(e.g., for visual browsers, the EM element in HTML is presented using an italic font).\nSee e.g. the HTML user agent style sheet. [HTML]\nExtensions to CSS define the following additional origins:\nAnimation Origin\nCSS Animations [css-animations-1] generate “virtual” rules representing their effects when running.\nTransition Origin\nLike CSS Animations, CSS Transitions [css-transitions-1] generate “virtual” rules representing their effects when running."
    }
  ]
}

{
  "contentHash": "sha256:a024cc8d28c500147dd177f2ffff499875e9f03fa3ea02b21257534cb4120798",
  "edition": "urn:w3c:clir:css-cascade#CSS_CASCADE_5_EN",
  "fragmentKind": "section",
  "id": "urn:w3c:clir:css-cascade#CSS_S6_3",
  "kind": "fragment",
  "locator": "section/6_3",
  "package": "urn:w3c:clir:css-cascade",
  "texts": [
    {
      "contentHash": "sha256:bd1317210a37ccf99d61011c32115ad4967f2ab6363881f0514c3dda62a5ba94",
      "language": "en",
      "status": "official",
      "text": "6.3. Important Declarations: the !important annotation\nCSS attempts to create a balance of power between author and user style sheets.\nBy default, rules in an author’s style sheet override those in a user’s style sheet,\nwhich override those in the user-agent’s default style sheet.\nTo balance this, a declaration can be marked important,\nwhich increases its weight in the cascade and inverts the order of precedence.\nA declaration is important if it has a !important annotation as defined by [css-syntax-3],\ni.e. if the last two (non-whitespace, non-comment) tokens\nin its value are the delimiter token ! followed by the identifier token important.\nAll other declarations are normal (non-important).\n[hidden] { display: none !important; }\nAn important declaration takes precedence over a normal declaration.\nAuthor and user style sheets may contain important declarations,\nwith user-origin important declarations\noverriding author-origin important declarations.\nThis CSS feature improves accessibility of documents\nby giving users with special requirements\n(large fonts, color combinations, etc.)\ncontrol over presentation.\nImportant declarations from all origins take precedence over animations.\nThis allows authors to override animated values in important cases.\n(Animated values normally override all other rules.) [css-animations-1]\nUser-agent style sheets may also contain important declarations.\nThese override all author and user declarations.\nThe first rule in the user’s style sheet in the following example contains an !important declaration,\nwhich overrides the corresponding declaration in the author’s style sheet.\nThe declaration in the second rule will also win due to being marked !important.\nHowever, the third declaration in the user’s style sheet is not !important and will therefore lose to the second rule in the author’s style sheet\n(which happens to set style on a shorthand property).\nAlso, the third author rule will lose to the second author rule since the second declaration is !important.\nThis shows that !important declarations have a function also within author style sheets.\n/* From the user’s style sheet */\np { text-indent: 1em !important }\np { font-style: italic !important }\np { font-size: 18pt }\n/* From the author’s style sheet */\np { text-indent: 1.5em !important }\np { font: normal 12pt sans-serif !important }\np { font-size: 24pt }\nProperty\nWinning value\ntext-indent\n1em\nfont-style\nitalic\nfont-size\n12pt\nfont-family\nsans-serif"
    }
  ]
}

{
  "contentHash": "sha256:0b68d835f967794dc9ca88471f74f480a71436dcf0be1011eedd0229f17b8712",
  "edition": "urn:w3c:clir:css-cascade#CSS_CASCADE_5_EN",
  "fragmentKind": "section",
  "id": "urn:w3c:clir:css-cascade#CSS_S6_4",
  "kind": "fragment",
  "locator": "section/6_4",
  "package": "urn:w3c:clir:css-cascade",
  "texts": [
    {
      "contentHash": "sha256:94d9f89eebe1b746e66c075a218c8eac54cec0ed51b4a50b211c631474adb89e",
      "language": "en",
      "status": "official",
      "text": "6.4. Cascade Layers\nIn the same way that cascade origins provide a balance of power\nbetween user and author styles, cascade layers provide a structured way\nto organize and balance concerns within a single origin.\nRules within a single cascade layer cascade together,\nwithout interleaving with style rules outside the layer.\nAuthors can create layers to represent element defaults,\nthird-party libraries, themes, components,\noverrides, and other styling concerns—and are able to re-order the cascade of layers in an explicit way,\nwithout altering selectors or specificity within each layer,\nor relying on source-order to resolve conflicts across layers.\nFor example, the following generates an explicit reset layer,\nwith lower cascade weight than any unlayered styles:\naudio {\n/* specificity of 0,0,1 - implicit (final) layer */\ndisplay: flex;\n}\n@layer reset {\naudio[controls] {\n/* specificity of 0,1,1 - explicit \"reset\" layer */\ndisplay: block;\n}\n}\nThe unlayered declarations on the audio element take precedence\nover the explicitly layered declarations on audio[controls] —even though the unlayered styles have a lower specificity,\nand come first in the source order.\nName-defining at-rules such as @keyframes or @font-face that are defined inside cascade layers also use the layer order when resolving name collisions.\nFor example,\nauthors could override the animation from a framework,\nby providing keyframes with the same name in a higher-priority layer:\n/* establish the layer order, so the \"override\" layer takes precedence */\n@layer framework, override;\n@layer override {\n@keyframes slide-left {\nfrom { translate: 0; }\nto { translate: -100% 0; }\n}\n}\n@layer framework {\n@keyframes slide-left {\nfrom { margin-left: 0; }\nto { margin-left: -100%; }\n}\n}\n.sidebar { animation: slide-left 300ms; }\nIn this case the override layer\nhas a higher cascade priority than the framework layer,\nso slide-left will animate\nusing the translate property rather than margin-left."
    }
  ]
}

{
  "contentHash": "sha256:f73f7da5ab24db1edcfbb517ac720af6ea90b869dea1859d4baf5c4fbeff57bf",
  "edition": "urn:w3c:clir:css-cascade#CSS_CASCADE_5_EN",
  "fragmentKind": "section",
  "id": "urn:w3c:clir:css-cascade#CSS_S6_4_1",
  "kind": "fragment",
  "locator": "section/6_4_1",
  "package": "urn:w3c:clir:css-cascade",
  "texts": [
    {
      "contentHash": "sha256:c3b580096f3d74ade16cb2be984ef844a3b1213a1702db95e9140c610621ca23",
      "language": "en",
      "status": "official",
      "text": "6.4.1. Declaring Cascade Layers\nCascade layers can be declared:\nusing an @import rule with the layer keyword or layer() function,\nassigning the contents of the imported file into that layer.\nusing a @layer block at-rule,\nassigning its child style rules into that layer.\nusing a @layer statement at-rule,\ndeclaring a named layer without assigning any rules.\nProvide an attribute for assigning link or style elements to cascade layers? [Issue #w3c/csswg-drafts#5853]"
    }
  ]
}

{
  "contentHash": "sha256:7e326980bfd03ace3a7629bcd6c0159c20288fc7443037f29258c419e7015e72",
  "edition": "urn:w3c:clir:css-cascade#CSS_CASCADE_5_EN",
  "fragmentKind": "section",
  "id": "urn:w3c:clir:css-cascade#CSS_S6_4_3",
  "kind": "fragment",
  "locator": "section/6_4_3",
  "package": "urn:w3c:clir:css-cascade",
  "texts": [
    {
      "contentHash": "sha256:423c8d9abc7b4b538a234b0911b2cd098c448661321d0904fc0f1a2c9b4f2012",
      "language": "en",
      "status": "official",
      "text": "6.4.3. Layer Ordering\nCascade layers are sorted\nby the order in which they first are declared,\nwith nested layers grouped within their parent layers\nbefore any unlayered rules.\nGiven the following layer rules:\n/* unlayered styles come last in the layer order */\nh1 { color: darkslateblue; }\n@layer reset.type {\nstrong { font-weight: bold; }\n}\n@layer framework {\n.title { font-weight: 100; }\n@layer theme {\nh1, h2 { color: maroon; }\n}\n}\n@layer reset {\n[hidden] { display: none; }\n}\nThe outer layers are sorted first,\nwith any unlayered style rules\nadded to an implicit outer layer which\nhas higher priority than (comes after) the explicit layers:\nreset\nframework\n(implicit outer layer)\nWithin each layer,\nnested layers are sorted in appearance order,\nand style rules without further nesting\nare similarly added to an implicit sub-layer\nafter the explicitly nested layers:\nreset.type\nreset (implicit sub-layer)\nframework.theme\nframework (implicit sub-layer)\n(implicit outer layer)\nLayers that are defined inside of a conditional group rule do not contribute to the layer order unless the condition is true\nor unless the conditional group rule can evaluate differently\nfor different elements in the document.\nNote: Since the layer order is global to the document,\nany layers defined inside an element-sensitive conditional group rule need to be accommodated when establishing the global layer order,\nregardless of the rule’s condition.\nConditions that are global to the document, however\n(such as @media and @supports)\ncan accommodate such @layer rules conditionally.\nFor example,\nthe following layer order\nwill depend on which media conditions match:\n@media (min-width: 30em) {\n@layer layout {\n.title { font-size: x-large; }\n}\n}\n@media (prefers-color-scheme: dark) {\n@layer theme {\n.title { color: white; }\n}\n}\n@layer theme, layout;\nIf the first media-query matches based on viewport dimensions,\nthen the layout layer will come first in the layer order.\nIf the color-scheme preference query matches,\nor if neither condition is true,\nthen theme will come first in the layer order.\nAuthors who want to avoid this behavior can establish\nan explicit ordering of layers in advance,\nand avoid defining new layers inside conditional rules.\nNote: Cascade layers are scoped to their origin and context,\nso the ordering of layers in the light DOM has no impact\non the order of identically-named layers in the shadow DOM\n(and vice versa).\nAllow authors to explicitly place unlayered styles in the layer order [Issue #6323]"
    }
  ]
}

{
  "contentHash": "sha256:f0444555d0fe01d36d5b6350e957503e5bfa9478f992ad952091ee9992d04dab",
  "edition": "urn:w3c:clir:css-cascade#CSS_CASCADE_5_EN",
  "fragmentKind": "section",
  "id": "urn:w3c:clir:css-cascade#CSS_S7",
  "kind": "fragment",
  "locator": "section/7",
  "package": "urn:w3c:clir:css-cascade",
  "texts": [
    {
      "contentHash": "sha256:ef9632ae537908328c0990f6ad4fc60fd6e32e5dc47947dfbe31526e1197d966",
      "language": "en",
      "status": "official",
      "text": "7. Defaulting\nWhen the cascade does not result in a value,\nthe specified value must be found some other way. Inherited properties draw their defaults from their parent element through inheritance;\nall other properties take their initial value.\nAuthors can explicitly request inheritance or initialization\nvia the inherit and initial keywords."
    }
  ]
}

{
  "contentHash": "sha256:f259ae221bd4ab6775e42b189fc717daeb295c00304c5ad6ebfb692d25d7190b",
  "edition": "urn:w3c:clir:css-cascade#CSS_CASCADE_5_EN",
  "fragmentKind": "section",
  "id": "urn:w3c:clir:css-cascade#CSS_S7_3",
  "kind": "fragment",
  "locator": "section/7_3",
  "package": "urn:w3c:clir:css-cascade",
  "texts": [
    {
      "contentHash": "sha256:2c9a0c61a35084c4cb57ce479d688d037655c4c5fed1fa24b0b2ee5a9c325e43",
      "language": "en",
      "status": "official",
      "text": "7.3. Explicit Defaulting\nSeveral CSS-wide property values are defined below;\ndeclaring a property to have these values explicitly specifies a particular defaulting behavior.\nAs specified in CSS Values and Units [css-values-3],\nall CSS properties can accept these values."
    }
  ]
}

{
  "contentHash": "sha256:2c0dc8bb4155586ca80391621fa221a1e4dbc765b8fec045caf564eb9ec6d7f3",
  "edition": "urn:w3c:clir:css-cascade#CSS_CASCADE_5_EN",
  "fragmentKind": "section",
  "id": "urn:w3c:clir:css-cascade#CSS_S7_3_4",
  "kind": "fragment",
  "locator": "section/7_3_4",
  "package": "urn:w3c:clir:css-cascade",
  "texts": [
    {
      "contentHash": "sha256:93ccc25f0643cf0eae5ca7b86594f868b1ec46b0b0b74aaa655cf3cfaf128447",
      "language": "en",
      "status": "official",
      "text": "7.3.4. Rolling Back Cascade Origins: the revert keyword\nIf the cascaded value of a property is\nthe revert keyword,\nthe behavior depends on the cascade origin to which the declaration belongs:\nuser-agent origin\nEquivalent to unset.\nuser origin\nRolls back the cascaded value to the user-agent level,\nso that the specified value is calculated\nas if no author-origin or user-origin rules were specified\nfor this property on this element.\nauthor origin\nRolls back the cascaded value to the user level,\nso that the specified value is calculated\nas if no author-origin rules were specified\nfor this property on this element.\nFor the purpose of revert, this origin includes the Animation origin."
    }
  ]
}

{
  "contentHash": "sha256:1032e4306c7274d3ee0bbf2523002057a0add9365c58f88f61d8982aa5b8b8bc",
  "edition": "urn:w3c:clir:css-cascade#CSS_CASCADE_5_EN",
  "fragmentKind": "section",
  "id": "urn:w3c:clir:css-cascade#CSS_S4",
  "kind": "fragment",
  "locator": "section/4",
  "package": "urn:w3c:clir:css-cascade",
  "texts": [
    {
      "contentHash": "sha256:51b78361fbdaeb78dfb2656060149b495574c0a69c5117d568c79834578936a7",
      "language": "en",
      "status": "official",
      "text": "4. Value Processing\nOnce a user agent has parsed a document and constructed a document tree,\nit must assign,\nto every element in the tree,\nand correspondingly to every box in the formatting structure,\na value to every property that applies to the target media type.\nThe final value of a CSS property for a given element or box\nis the result of a multi-step calculation:\nFirst, all the declared values applied to an element are collected,\nfor each property on each element.\nThere may be zero or many declared values applied to the element.\nCascading yields the cascaded value.\nThere is at most one cascaded value per property per element.\nDefaulting yields the specified value.\nEvery element has exactly one specified value per property.\nResolving value dependencies yields the computed value.\nEvery element has exactly one computed value per property.\nFormatting the document yields the used value.\nAn element only has a used value for a given property\nif that property applies to the element.\nFinally, the used value is transformed to the actual value based on constraints of the display environment.\nAs with the used value, there may or may not be an actual value for a given property on an element.\nElements that are not connected or are not part of the document’s flattened element tree do not participate in CSS value processing,\nand do not have declared, cascaded, specified, computed, used, or actual values,\neven if they potentially have style declarations assigned to them\n(for example, by a style attribute)."
    }
  ]
}

{
  "contentHash": "sha256:d3eb77b85d6f380950eabb8264aa1292b4b06e78160c509b51a08cd11ef66b75",
  "edition": "urn:w3c:clir:css-cascade#CSS_CASCADE_5_EN",
  "fragmentKind": "section",
  "id": "urn:w3c:clir:css-cascade#CSS_S4_1",
  "kind": "fragment",
  "locator": "section/4_1",
  "package": "urn:w3c:clir:css-cascade",
  "texts": [
    {
      "contentHash": "sha256:72a3f831fcd5599e111a8de28258297f64f0b10d33b7985e18764d786198cbe6",
      "language": "en",
      "status": "official",
      "text": "4.1. Declared Values\nEach property declaration applied to an element contributes a declared value for that property\nassociated with the element.\nSee Filtering Declarations for details.\nThese values are then processed by the cascade to choose a single “winning value”."
    }
  ]
}

{
  "contentHash": "sha256:680967c0335bc170bb1d3eed857cbdf65e0844c28cdb882b06f955b18b290de3",
  "edition": "urn:w3c:clir:css-cascade#CSS_CASCADE_5_EN",
  "fragmentKind": "section",
  "id": "urn:w3c:clir:css-cascade#CSS_S4_2",
  "kind": "fragment",
  "locator": "section/4_2",
  "package": "urn:w3c:clir:css-cascade",
  "texts": [
    {
      "contentHash": "sha256:728fbf4896aa8d75ffa250decd97924c873b11dbb4feb9298215b8b007ad9772",
      "language": "en",
      "status": "official",
      "text": "4.2. Cascaded Values\nThe cascaded value represents the result of the cascade:\nit is the declared value that wins the cascade\n(is sorted first in the output of the cascade).\nIf the output of the cascade is an empty list,\nthere is no cascaded value."
    }
  ]
}

{
  "contentHash": "sha256:18572a052bae5476779611907414d7f2bb328c5a50cac975f43175a6a8b65832",
  "edition": "urn:w3c:clir:css-cascade#CSS_CASCADE_5_EN",
  "fragmentKind": "section",
  "id": "urn:w3c:clir:css-cascade#CSS_S4_3",
  "kind": "fragment",
  "locator": "section/4_3",
  "package": "urn:w3c:clir:css-cascade",
  "texts": [
    {
      "contentHash": "sha256:2eef2e76916e9205133507a43183a478b65d604a0290247af7c8b16590ce4fa1",
      "language": "en",
      "status": "official",
      "text": "4.3. Specified Values\nThe specified value is\nthe value of a given property that the style sheet authors intended for that element.\nIt is the result of putting the cascaded value through the defaulting processes,\nguaranteeing that a specified value exists for every property on every element.\nIn many cases, the specified value is the cascaded value.\nHowever, if there is no cascaded value at all,\nthe specified value is defaulted.\nThe CSS-wide keywords are handled specially\nwhen they are the cascaded value of a property,\nsetting the specified value as required by that keyword,\nsee § 7.3 Explicit Defaulting."
    }
  ]
}

{
  "contentHash": "sha256:4250c835138ba865333b025adf054873db60d185e1cd5c5f9be5a8802f18cbb8",
  "edition": "urn:w3c:clir:css-cascade#CSS_CASCADE_5_EN",
  "fragmentKind": "section",
  "id": "urn:w3c:clir:css-cascade#CSS_S5",
  "kind": "fragment",
  "locator": "section/5",
  "package": "urn:w3c:clir:css-cascade",
  "texts": [
    {
      "contentHash": "sha256:b845fde7eebcda9f0d16fb5b642544b38844d58b48c032bbd643d1b6c22ac12c",
      "language": "en",
      "status": "official",
      "text": "5. Filtering\nIn order to find the declared values,\nimplementations must first identify all declarations that apply to each element.\nA declaration applies to an element if:\nIt belongs to a style sheet that currently applies to this document.\nIt is not qualified by a conditional rule [CSS-CONDITIONAL-3] with a false condition.\nIt belongs to a style rule whose selector matches the element. [SELECT] (Taking scoping into account, if necessary.)\nIt is syntactically valid:\nthe declaration’s property is a known property name,\nand the declaration’s value matches the syntax for that property.\nThe values of the declarations that apply form,\nfor each property on each element,\na list of declared values.\nThe next section,\nthe cascade,\nprioritizes these lists."
    }
  ]
}

{
  "contentHash": "sha256:da05d1967ed9d40f006a13cba7727b772a337fbb1bfe6b33fec74b6263ac4082",
  "edition": "urn:w3c:clir:css-cascade#CSS_CASCADE_5_EN",
  "fragmentKind": "section",
  "id": "urn:w3c:clir:css-cascade#CSS_S6",
  "kind": "fragment",
  "locator": "section/6",
  "package": "urn:w3c:clir:css-cascade",
  "texts": [
    {
      "contentHash": "sha256:4df89230801a772d0581dcf402d0a775977299ee375b80984bc1b6e8e9ec4730",
      "language": "en",
      "status": "official",
      "text": "6. Cascading\nThe cascade takes an unordered list of declared values for a given property on a given element,\nsorts them by their declaration’s precedence as determined below,\nand outputs a single cascaded value."
    }
  ]
}

{
  "contentHash": "sha256:62ff4952c56b4dcbc0912c044a09065a4f8e433b7abc2a86a833401fd4b9984b",
  "edition": "urn:w3c:clir:css-cascade#CSS_CASCADE_5_EN",
  "fragmentKind": "section",
  "id": "urn:w3c:clir:css-cascade#CSS_S6_1",
  "kind": "fragment",
  "locator": "section/6_1",
  "package": "urn:w3c:clir:css-cascade",
  "texts": [
    {
      "contentHash": "sha256:b479a434611fc00c1da90099fa4c87ef1a3edb45ff9b0594585cb95c6d6cdb9d",
      "language": "en",
      "status": "official",
      "text": "6.1. Cascade Sorting Order\nThe cascade sorts declarations according to the following criteria,\nin descending order of priority:\nOrigin and Importance\nThe origin of a declaration is based on where it comes from\nand its importance is\nwhether or not it is declared with !important (see below).\nThe precedence of the various origins is, in descending order:\nTransition declarations [css-transitions-1]\nImportant user agent declarations\nImportant user declarations\nImportant author declarations\nAnimation declarations [css-animations-1]\nNormal author declarations\nNormal user declarations\nNormal user agent declarations\nDeclarations from origins earlier in this list win over declarations from later origins.\nContext\nA document language can provide for blending declarations sourced\nfrom different encapsulation contexts,\nsuch as the nested tree contexts of shadow trees in the [DOM].\nWhen comparing two declarations\nthat are sourced from different encapsulation contexts,\nthen for normal rules\nthe declaration from the outer context wins,\nand for important rules\nthe declaration from the inner context wins.\nFor this purpose, [DOM] tree contexts are considered to be nested\nin shadow-including tree order.\nNote: This effectively means that normal declarations belonging to an encapsulation context can set defaults that are easily overridden by the outer context,\nwhile important declarations belonging to an encapsulation context can enforce requirements that cannot be overridden by the outer context.\nElement-Attached Styles\nSeparately for normal and important declarations,\ndeclarations that are attached directly to an element\n(such as the contents of a style attribute)\nrather than indirectly mapped by means of a style rule selector\ntake precedence over declarations the same importance that are mapped via style rule.\nSee [css-style-attr].\nNote: Non-CSS presentational hints (such as presentational markup)\nare handled separately,\nsee § 6.5 Precedence of Non-CSS Presentational Hints.\nLayers\nDeclarations within each origin and context can be explicitly assigned to a cascade layer.\nFor the purpose of this step,\nany declaration not assigned to an explicit layer\nis added to an implicit final layer.\nCascade layers (like declarations) are ordered by order of appearance.\nWhen comparing declarations that belong to different layers,\nthen for normal rules the declaration whose cascade layer is last wins,\nand for important rules the declaration whose cascade layer is first wins.\nNote: This follows the same logic used for layering normal and important origins,\nso that the !important flag maintains the same “override” purpose in both settings.\nSpecificity\nThe Selectors module [SELECT] describes how to compute the specificity of a selector.\nEach declaration has the same specificity as the style rule it appears in.\nThe declaration with the highest specificity wins.\nOrder of Appearance\nThe last declaration in document order wins.\nFor this purpose:\nStyle sheets are ordered as in final CSS style sheets.\nDeclarations from imported style sheets are ordered as if their style sheets were substituted in place of the @import rule.\nDeclarations from style sheets independently linked by the originating document\nare treated as if they were concatenated in linking order,\nas determined by the host document language.\nDeclarations from style attributes\nare ordered according to the document order of the element the style attribute appears on,\nand are all placed after any style sheets.\nThe output of the cascade is a (potentially empty) sorted list of declared values for each property on each element."
    }
  ]
}

{
  "contentHash": "sha256:a024cc8d28c500147dd177f2ffff499875e9f03fa3ea02b21257534cb4120798",
  "edition": "urn:w3c:clir:css-cascade#CSS_CASCADE_5_EN",
  "fragmentKind": "section",
  "id": "urn:w3c:clir:css-cascade#CSS_S6_3",
  "kind": "fragment",
  "locator": "section/6_3",
  "package": "urn:w3c:clir:css-cascade",
  "texts": [
    {
      "contentHash": "sha256:bd1317210a37ccf99d61011c32115ad4967f2ab6363881f0514c3dda62a5ba94",
      "language": "en",
      "status": "official",
      "text": "6.3. Important Declarations: the !important annotation\nCSS attempts to create a balance of power between author and user style sheets.\nBy default, rules in an author’s style sheet override those in a user’s style sheet,\nwhich override those in the user-agent’s default style sheet.\nTo balance this, a declaration can be marked important,\nwhich increases its weight in the cascade and inverts the order of precedence.\nA declaration is important if it has a !important annotation as defined by [css-syntax-3],\ni.e. if the last two (non-whitespace, non-comment) tokens\nin its value are the delimiter token ! followed by the identifier token important.\nAll other declarations are normal (non-important).\n[hidden] { display: none !important; }\nAn important declaration takes precedence over a normal declaration.\nAuthor and user style sheets may contain important declarations,\nwith user-origin important declarations\noverriding author-origin important declarations.\nThis CSS feature improves accessibility of documents\nby giving users with special requirements\n(large fonts, color combinations, etc.)\ncontrol over presentation.\nImportant declarations from all origins take precedence over animations.\nThis allows authors to override animated values in important cases.\n(Animated values normally override all other rules.) [css-animations-1]\nUser-agent style sheets may also contain important declarations.\nThese override all author and user declarations.\nThe first rule in the user’s style sheet in the following example contains an !important declaration,\nwhich overrides the corresponding declaration in the author’s style sheet.\nThe declaration in the second rule will also win due to being marked !important.\nHowever, the third declaration in the user’s style sheet is not !important and will therefore lose to the second rule in the author’s style sheet\n(which happens to set style on a shorthand property).\nAlso, the third author rule will lose to the second author rule since the second declaration is !important.\nThis shows that !important declarations have a function also within author style sheets.\n/* From the user’s style sheet */\np { text-indent: 1em !important }\np { font-style: italic !important }\np { font-size: 18pt }\n/* From the author’s style sheet */\np { text-indent: 1.5em !important }\np { font: normal 12pt sans-serif !important }\np { font-size: 24pt }\nProperty\nWinning value\ntext-indent\n1em\nfont-style\nitalic\nfont-size\n12pt\nfont-family\nsans-serif"
    }
  ]
}

{
  "contentHash": "sha256:0b68d835f967794dc9ca88471f74f480a71436dcf0be1011eedd0229f17b8712",
  "edition": "urn:w3c:clir:css-cascade#CSS_CASCADE_5_EN",
  "fragmentKind": "section",
  "id": "urn:w3c:clir:css-cascade#CSS_S6_4",
  "kind": "fragment",
  "locator": "section/6_4",
  "package": "urn:w3c:clir:css-cascade",
  "texts": [
    {
      "contentHash": "sha256:94d9f89eebe1b746e66c075a218c8eac54cec0ed51b4a50b211c631474adb89e",
      "language": "en",
      "status": "official",
      "text": "6.4. Cascade Layers\nIn the same way that cascade origins provide a balance of power\nbetween user and author styles, cascade layers provide a structured way\nto organize and balance concerns within a single origin.\nRules within a single cascade layer cascade together,\nwithout interleaving with style rules outside the layer.\nAuthors can create layers to represent element defaults,\nthird-party libraries, themes, components,\noverrides, and other styling concerns—and are able to re-order the cascade of layers in an explicit way,\nwithout altering selectors or specificity within each layer,\nor relying on source-order to resolve conflicts across layers.\nFor example, the following generates an explicit reset layer,\nwith lower cascade weight than any unlayered styles:\naudio {\n/* specificity of 0,0,1 - implicit (final) layer */\ndisplay: flex;\n}\n@layer reset {\naudio[controls] {\n/* specificity of 0,1,1 - explicit \"reset\" layer */\ndisplay: block;\n}\n}\nThe unlayered declarations on the audio element take precedence\nover the explicitly layered declarations on audio[controls] —even though the unlayered styles have a lower specificity,\nand come first in the source order.\nName-defining at-rules such as @keyframes or @font-face that are defined inside cascade layers also use the layer order when resolving name collisions.\nFor example,\nauthors could override the animation from a framework,\nby providing keyframes with the same name in a higher-priority layer:\n/* establish the layer order, so the \"override\" layer takes precedence */\n@layer framework, override;\n@layer override {\n@keyframes slide-left {\nfrom { translate: 0; }\nto { translate: -100% 0; }\n}\n}\n@layer framework {\n@keyframes slide-left {\nfrom { margin-left: 0; }\nto { margin-left: -100%; }\n}\n}\n.sidebar { animation: slide-left 300ms; }\nIn this case the override layer\nhas a higher cascade priority than the framework layer,\nso slide-left will animate\nusing the translate property rather than margin-left."
    }
  ]
}

{
  "contentHash": "sha256:f73f7da5ab24db1edcfbb517ac720af6ea90b869dea1859d4baf5c4fbeff57bf",
  "edition": "urn:w3c:clir:css-cascade#CSS_CASCADE_5_EN",
  "fragmentKind": "section",
  "id": "urn:w3c:clir:css-cascade#CSS_S6_4_1",
  "kind": "fragment",
  "locator": "section/6_4_1",
  "package": "urn:w3c:clir:css-cascade",
  "texts": [
    {
      "contentHash": "sha256:c3b580096f3d74ade16cb2be984ef844a3b1213a1702db95e9140c610621ca23",
      "language": "en",
      "status": "official",
      "text": "6.4.1. Declaring Cascade Layers\nCascade layers can be declared:\nusing an @import rule with the layer keyword or layer() function,\nassigning the contents of the imported file into that layer.\nusing a @layer block at-rule,\nassigning its child style rules into that layer.\nusing a @layer statement at-rule,\ndeclaring a named layer without assigning any rules.\nProvide an attribute for assigning link or style elements to cascade layers? [Issue #w3c/csswg-drafts#5853]"
    }
  ]
}

{
  "contentHash": "sha256:7e326980bfd03ace3a7629bcd6c0159c20288fc7443037f29258c419e7015e72",
  "edition": "urn:w3c:clir:css-cascade#CSS_CASCADE_5_EN",
  "fragmentKind": "section",
  "id": "urn:w3c:clir:css-cascade#CSS_S6_4_3",
  "kind": "fragment",
  "locator": "section/6_4_3",
  "package": "urn:w3c:clir:css-cascade",
  "texts": [
    {
      "contentHash": "sha256:423c8d9abc7b4b538a234b0911b2cd098c448661321d0904fc0f1a2c9b4f2012",
      "language": "en",
      "status": "official",
      "text": "6.4.3. Layer Ordering\nCascade layers are sorted\nby the order in which they first are declared,\nwith nested layers grouped within their parent layers\nbefore any unlayered rules.\nGiven the following layer rules:\n/* unlayered styles come last in the layer order */\nh1 { color: darkslateblue; }\n@layer reset.type {\nstrong { font-weight: bold; }\n}\n@layer framework {\n.title { font-weight: 100; }\n@layer theme {\nh1, h2 { color: maroon; }\n}\n}\n@layer reset {\n[hidden] { display: none; }\n}\nThe outer layers are sorted first,\nwith any unlayered style rules\nadded to an implicit outer layer which\nhas higher priority than (comes after) the explicit layers:\nreset\nframework\n(implicit outer layer)\nWithin each layer,\nnested layers are sorted in appearance order,\nand style rules without further nesting\nare similarly added to an implicit sub-layer\nafter the explicitly nested layers:\nreset.type\nreset (implicit sub-layer)\nframework.theme\nframework (implicit sub-layer)\n(implicit outer layer)\nLayers that are defined inside of a conditional group rule do not contribute to the layer order unless the condition is true\nor unless the conditional group rule can evaluate differently\nfor different elements in the document.\nNote: Since the layer order is global to the document,\nany layers defined inside an element-sensitive conditional group rule need to be accommodated when establishing the global layer order,\nregardless of the rule’s condition.\nConditions that are global to the document, however\n(such as @media and @supports)\ncan accommodate such @layer rules conditionally.\nFor example,\nthe following layer order\nwill depend on which media conditions match:\n@media (min-width: 30em) {\n@layer layout {\n.title { font-size: x-large; }\n}\n}\n@media (prefers-color-scheme: dark) {\n@layer theme {\n.title { color: white; }\n}\n}\n@layer theme, layout;\nIf the first media-query matches based on viewport dimensions,\nthen the layout layer will come first in the layer order.\nIf the color-scheme preference query matches,\nor if neither condition is true,\nthen theme will come first in the layer order.\nAuthors who want to avoid this behavior can establish\nan explicit ordering of layers in advance,\nand avoid defining new layers inside conditional rules.\nNote: Cascade layers are scoped to their origin and context,\nso the ordering of layers in the light DOM has no impact\non the order of identically-named layers in the shadow DOM\n(and vice versa).\nAllow authors to explicitly place unlayered styles in the layer order [Issue #6323]"
    }
  ]
}

{
  "contentHash": "sha256:f0444555d0fe01d36d5b6350e957503e5bfa9478f992ad952091ee9992d04dab",
  "edition": "urn:w3c:clir:css-cascade#CSS_CASCADE_5_EN",
  "fragmentKind": "section",
  "id": "urn:w3c:clir:css-cascade#CSS_S7",
  "kind": "fragment",
  "locator": "section/7",
  "package": "urn:w3c:clir:css-cascade",
  "texts": [
    {
      "contentHash": "sha256:ef9632ae537908328c0990f6ad4fc60fd6e32e5dc47947dfbe31526e1197d966",
      "language": "en",
      "status": "official",
      "text": "7. Defaulting\nWhen the cascade does not result in a value,\nthe specified value must be found some other way. Inherited properties draw their defaults from their parent element through inheritance;\nall other properties take their initial value.\nAuthors can explicitly request inheritance or initialization\nvia the inherit and initial keywords."
    }
  ]
}

{
  "contentHash": "sha256:f259ae221bd4ab6775e42b189fc717daeb295c00304c5ad6ebfb692d25d7190b",
  "edition": "urn:w3c:clir:css-cascade#CSS_CASCADE_5_EN",
  "fragmentKind": "section",
  "id": "urn:w3c:clir:css-cascade#CSS_S7_3",
  "kind": "fragment",
  "locator": "section/7_3",
  "package": "urn:w3c:clir:css-cascade",
  "texts": [
    {
      "contentHash": "sha256:2c9a0c61a35084c4cb57ce479d688d037655c4c5fed1fa24b0b2ee5a9c325e43",
      "language": "en",
      "status": "official",
      "text": "7.3. Explicit Defaulting\nSeveral CSS-wide property values are defined below;\ndeclaring a property to have these values explicitly specifies a particular defaulting behavior.\nAs specified in CSS Values and Units [css-values-3],\nall CSS properties can accept these values."
    }
  ]
}

{
  "contentHash": "sha256:2c0dc8bb4155586ca80391621fa221a1e4dbc765b8fec045caf564eb9ec6d7f3",
  "edition": "urn:w3c:clir:css-cascade#CSS_CASCADE_5_EN",
  "fragmentKind": "section",
  "id": "urn:w3c:clir:css-cascade#CSS_S7_3_4",
  "kind": "fragment",
  "locator": "section/7_3_4",
  "package": "urn:w3c:clir:css-cascade",
  "texts": [
    {
      "contentHash": "sha256:93ccc25f0643cf0eae5ca7b86594f868b1ec46b0b0b74aaa655cf3cfaf128447",
      "language": "en",
      "status": "official",
      "text": "7.3.4. Rolling Back Cascade Origins: the revert keyword\nIf the cascaded value of a property is\nthe revert keyword,\nthe behavior depends on the cascade origin to which the declaration belongs:\nuser-agent origin\nEquivalent to unset.\nuser origin\nRolls back the cascaded value to the user-agent level,\nso that the specified value is calculated\nas if no author-origin or user-origin rules were specified\nfor this property on this element.\nauthor origin\nRolls back the cascaded value to the user level,\nso that the specified value is calculated\nas if no author-origin rules were specified\nfor this property on this element.\nFor the purpose of revert, this origin includes the Animation origin."
    }
  ]
}