What is the order of precedence for CSS?

前端 未结 8 1637
攒了一身酷
攒了一身酷 2020-11-22 09:43

I\'m trying to figure out why one of my css classes seems to override the other (and not the other way around)

Here I have two css classes

.smallbo         


        
相关标签:
8条回答
  • 2020-11-22 10:15

    Also important to note is that when you have two styles on an HTML element with equal precedence, the browser will give precedence to the styles that were written to the DOM last ... so if in the DOM:

    <html>
    <head>
    <style>.container-ext { width: 100%; }</style>
    <style>.container { width: 50px; }</style>
    </head>
    <body>
    <div class="container container-ext">Hello World</div>
    </body>
    

    ...the width of the div will be 50px

    0 讨论(0)
  • 2020-11-22 10:17

    Here's a compilation of CSS styling order in a diagram, on which CSS rules has higher priority and take precedence over the rest:

    Disclaimer: My team and I worked this piece out together with a blog post (https://vecta.io/blog/definitive-guide-to-css-styling-order) which I think will come in handy to all front-end developers.

    0 讨论(0)
  • 2020-11-22 10:22

    The order in which the classes appear in the html element does not matter, what counts is the order in which the blocks appear in the style sheet.

    In your case .smallbox-paysummary is defined after .smallbox hence the 10px precedence.

    0 讨论(0)
  • 2020-11-22 10:23

    There are several rules ( applied in this order ) :

    1. inline css ( html style attribute ) overrides css rules in style tag and css file
    2. a more specific selector takes precedence over a less specific one
    3. rules that appear later in the code override earlier rules if both have the same specificity.
    4. A css rule with !important always takes precedence.

    In your case its rule 3 that applies.

    Specificity for single selectors from highest to lowest:

    • ids (example: #main selects <div id="main">)
    • classes (ex.: .myclass), attribute selectors (ex.: [href=^https:]) and pseudo-classes (ex.: :hover)
    • elements (ex.: div) and pseudo-elements (ex.: ::before)

    To compare the specificity of two combined selectors, compare the number of occurences of single selectors of each of the specificity groups above.

    Example: compare #nav ul li a:hover to #nav ul li.active a::after

    • count the number of id selectors: there is one for each (#nav)
    • count the number of class selectors: there is one for each (:hover and .active)
    • count the number of element selectors: there are 3 (ul li a) for the first and 4 for the second (ul li a ::after), thus the second combined selector is more specific.

    A good article about css selector specificity.

    0 讨论(0)
  • 2020-11-22 10:29
    Element, Pseudo Element: d = 1 – (0,0,0,1)
    Class, Pseudo class, Attribute: c = 1 – (0,0,1,0)
    Id: b = 1 – (0,1,0,0)
    Inline Style: a = 1 – (1,0,0,0)
    

    Inline css ( html style attribute ) overrides css rules in style tag and css file

    A more specific selector takes precedence over a less specific one.

    Rules that appear later in the code override earlier rules if both have the same specificity.

    0 讨论(0)
  • 2020-11-22 10:30

    What we are looking at here is called specificity as stated by Mozilla:

    Specificity is the means by which browsers decide which CSS property values are the most relevant to an element and, therefore, will be applied. Specificity is based on the matching rules which are composed of different sorts of CSS selectors.

    Specificity is a weight that is applied to a given CSS declaration, determined by the number of each selector type in the matching selector. When multiple declarations have equal specificity, the last declaration found in the CSS is applied to the element. Specificity only applies when the same element is targeted by multiple declarations. As per CSS rules, directly targeted elements will always take precedence over rules which an element inherits from its ancestor.

    I like the 0-0-0 explanation at https://specifishity.com:

    Quite descriptive the picture of the !important directive! But sometimes it's the only way to override the inline style attribute. So it's a best practice trying to avoid both.

    0 讨论(0)
提交回复
热议问题