This section focuses on

1. The inheritance

Some styles are inheritable in CSS, but what is inheritance? Officially, inheritance is a rule that allows styles to be applied not only to a particular HTML tag element, but also to its descendants.

If your father has double eyelid and your mother has single eyelid, then you have double eyelid, then you have inherited your father’s double eyelid.

Take our actual code to apply, the code is as follows:

<! DOCTYPEhtml>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>inheritance</title>
  <style type="text/css">
    div{
      color: red;
    }
  </style>
</head>
<body>
  <div>I am your<span>Mr Ma</span>And here is the<span>Study materials column</span>
  </div>

</body>
</html>
Copy the code

The color is applied not only to the div tag, but also to all child elements of the div tag (including text within div and text contained within SPAN).

Note: Some attributes can be inherited, such as the common color, font, text-*, etc.

Some attributes cannot be inherited, such as border:1px solid green;

Set div border:1px solid green; Later, it turns out that div has a solid border line, but the child span contains text that doesn’t work at all.

Website application: For example, when we were designing the website, the font color was gray and the font size was 14px. We can take advantage of CSS inheritance to achieve this effect.

The code is as follows:

body{
    color:gray;
    font-size:14px;
}
Copy the code

2. The particularity

We’ve learned so much about selectors before, so do you have any questions? For example, if I set a different CSS style code for the same element, which CSS style will be enabled for the element? Based on my experience, most of the students who have learned here believe that it is the last to write. So let’s look at an example:

<! DOCTYPEhtml>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
      p{
        color:red;
      }
      #wrap{
        color:green;
      }
      .box{
        color:yellow;
      }

    </style>

  </head>
  <body>
    <pClass ='box' id="wrap"> I am MJJ, guess what color </p>
  </body>
</html>
Copy the code

Effect display:

It turns out to be green. Why is that? Because the browser decides which CSS style to use based on the weight, the higher the weight, the higher the priority, the more CSS style to render,

Rules for CSS weights:

There is a structure like this:

<div class='wrap1' id='box1'>
	<div class="wrap2" id="box2">
		<p class='active'>MJJ</p>
	</div>
</div>
Copy the code

Here are a few examples of their weights:

p{color:gray; }/* the weight is 1*/
div div p{color:yellow; }/* The weight is 1+1+1=3*/
.active{color:red; }/ * 10 * / weight
div .active{color:black; }/* Weighs 11*/
div div .active{color:blue; }/* The weight is 12*/
.wrap #box2 .active{color:purple; }/* Weight is 120*/
#box1 #box2 .active{color:green; }/* Weighs 210*/
Copy the code

We can count the number of selectors (in order of id, class, and element). For example:

/* the weight is 1, 1, 1*/
#box1 .wrap2 div{
    color:red;
}
Copy the code

Note: The inherited attribute also has a weight, but it has a very low weight. Some documents suggest it is only 0.1, so it can be interpreted as having the lowest inherited weight.

3.! important

When we make web code, there are some special cases that need to set the highest weight for certain styles, what to do? For example, we know that the weight of the inline style is 1000, which is quite large, so we can use it! Important to solve.

<! DOCTYPEhtml>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>! The use of the important</title>
  <style type="text/css">
    div{
      color:green ! important;
    }
  </style>
</head>
<body>
  <div id="box" style="color:red;">
    <span>Mr Ma</span>
  </div>

</body>
</html>

Copy the code

Note: it is! Important is written before the semicolon

The effect is that the text turns green. But use! Important is a bad habit and should be avoided because it seriously breaks the weight comparison rules inherent in stylesheets, making it more difficult to debug bugs. When two conflicting bands! The important rule applies to the same tag, so the one with the highest priority will be used.

Under what circumstances can be used! important?

  • The first kind of

    • You have a site-wide CSS file on your site
    • At the same time, you or your partner wrote some very bad inline styles

  • The second,

    #box p { color: blue; } p.awesome { color: red; }
Copy the code

    How do I make the text red? In this case, if not applicable! The first rule is always greater than the second.