What are the characteristics of css? Analysis of three characteristics of css (inheritance, priority and cascading)

What are css features? The three characteristics of css are: inheritance, priority and cascading. So. Let’s take a closer look at the three features of inheritance, priority and cascading in CSS.

Inheritance

##InheritanceThat is, subclass elements inherit their parent Class styles, such as font-size, font-weight and other css styles starting with f, text-align, text-indent and other styles starting with t, as well as our commonly used color. I won’t demonstrate it simply, but emphasize the font-size thing (although there is inheritance, the effect of inheritance is different for different tags), such as the following code:

nbsp;html>
    <meta>
    <title>Document</title>
    <style>
        .fonts {
            font-size: 20px;
        }
    </style>
    <p>
        </p><p>我的字体大小为20px</p>
        <h1 id="我的字体大小为-px">我的字体大小为40px</h1>
    

Run result:

I set a font-size to 20px for the parent element p of the div and h1 tags. There is no problem with p. It inherits the 20px of p, but h1 becomes 40px. We It can be obtained from the JS code below.

Why is h1 40px? Because the default style of h1 is 2em (32px), as shown below

,

and the default font-size of h1 is 200%, because p is set to 20px, so by inheriting h1 The final font-size is 20*2=40px. If you want to make the font size of h1 label equal to the parent label p, you only need to set h1 {font-size:100%;}, as shown in the following figure:

nbsp;html>
    <meta>
    <title>Document</title>
    <style>
        .fonts {
            font-size: 20px;
        }
        h1 {
            font-size: 100%;
        }
    </style>
    <p>
        </p><p>我的字体大小为20px</p>
        <h1 id="我的字体大小为-px">我的字体大小为20px</h1>
    

Run result:

css priority

!important > Inline style>ID selector> Class selector> Tag> Wildcard> Inheritance> Browser default attribute

Like a little complicated. Let's prove it through the following examples.

Method - First check whether the selector hits the corresponding tag, and then make a judgment based on the weight after hitting it. The weight means counting the number of tags, by comparing the number of the three selectors of ID class tags. Decide who has the highest priority. When the quantities are the same, the decision is made by stacking (the latter covering the former).

displays green in the end, because although !important has the highest priority, there is no inheritance. The color of li is inherited from ul.

The answer is yellow, because all three can hit the element, so judging by the weight, the first one does not have the ID selector PASS, and the second one is the same as the third one, decided by cascading (the third one covers the second one) color.

html is a complex box with 12 p's nested in it. The innermost p has the class me. Judgment method: all elements can be hit, so through weight, class Selector>Element selector, so selecting blue.

can hit the corresponding element. The first weight is greater than the second one (compare the number of label selectors), display blue.

First exclude the fourth and fifth styles by whether they hit the corresponding elements, and then compare one, two, and three based on the weight - the first one: two IDs; Two: one ID and one class; third: two classes. Therefore, according to the weight ID> class, the final display is blue.

The answer is blue. The second one does not hit PASS. The first and third ones compare the weights. Since the One has no class, so the answer is blue.

Finally summarize the relationship between priority, cascading and weight——

Cascading is a feature of CSS. If two identical attributes act on the same tag, they will cascade. If multiple compound selectors act on the same label at the same time, it will be difficult to calculate the priority. We must calculate the weight and compare the weights to select the selector with the highest priority first.

How to calculate the weight:

(Count the number of tags) first count the ids, if the ids are equal, then count the categories. If the ids are not equal, there are more ids. The selector has a high weight, and the higher the weight, the higher the priority. If the number of id selectors is the same, then count the class selectors, and finally count the labels.

Note: Be sure to pay attention when comparing weights: Our selector must hit the corresponding tag Only then can the tag have corresponding attributes.

Recommended related articles:

The three major mechanisms (features) of Css: specificity, inheritance, cascading detailed explanation_html/ css_WEB-ITnose

Detailed explanation of CSS inheritance and cascading features

The above is the detailed content of What are the characteristics of css? Analysis of three characteristics of css (inheritance, priority and cascading). For more information, please follow other related articles on the PHP Chinese website!