css There are two characteristics : Inheritance and layering

inheritance

The concept of inheritance exists in object-oriented languages , In object-oriented languages , The characteristics of inheritance : Inherits the properties and methods of the parent class . So we're going to focus on css,css It's just setting properties . It's not about methods .

Inherit : Set some properties for the parent , The child inherits the property of the parent , This is our css Inheritance in .

remember : There are some properties that can be inherited : color 、 font-*、 text-*、line-* . Mainly text level label elements .

But like some box element attributes , Elements of positioning ( float , Absolute positioning , Fixed position ) Cannot inherit .

Layering

Layering : The label with weight covers the label with small weight , To put it bluntly , He was killed
The weight : Whose power is great , The browser will show whose properties

Whose power is great ? It's very simple. It's counting in primary school .

Count :id The number of class The number of Number of tags , The order must not be disordered

/*1 0 0 */ Show red 
#box{ color: red;
}
/*0 1 0*/
.container{
color: yellow;
}
/*0 0 1*/
p{
color: purple;
}
 <div id='box1' class="wrap1">
<div id="box2" class="wrap2">
<div id="box3" class="wrap3">
<p> And guess what color I am ?</p>
</div>
</div>
</div>
 #box1 #box2 p{
color: yellow;
} #box2 .wrap3 p{
color: red;
} div div #box3 p{
color: purple;
} div.wrap1 div.wrap2 div.wrap3 p{
color: blue;
}

well . Do you understand the above case ? So let's continue with the case

The top one html structure , If I set the following css, What color will it show .

 #box2 .wrap3 p{
color: yellow;
} #box1 .wrap2 p{
color: red;
}

The answer is red . Conclusion : When the power is the same It is the property to be set later , The premise has to be the same weight .‘ Later generations live in ’.

Good, Let's continue to look at the following css, You can guess the color of the following words ?

#box1 #box2 .wrap3{
color: red;
} #box2 .wrap3 p{
color: green;
}

The answer is green . ha-ha , Do you feel confused . In fact, just remember this feature . Article 1 with a css Set the property value of , It's set to red by inheritance , So the inherited property , Its weight is 0. It's not qualified to compare with the tag we've selected below .

Let's guess if they are all inherited attributes , So what color will the words show ?

#box1 #box2 .wrap3{
color: red;
}
.wrap1 #box2{
color: green;
}

Small cases prove that : The weights are all 0: So that is " Nearby principle " : Who described it as close to , Show who's attribute . The so-called description of the near , The closer to the innermost layer .

To sum up :

summary :
1. Let's see if the tag element is selected , If you choose , Just count (id,class, Number of tags ) Whose power is great Show who's attribute . The same weight , Later generations live in
2. If the tag element is not selected , The weight of 0.
If the attributes are inherited The weights are all 0 . The weights are all 0:" Nearby principle " : Who described it as close to , Show who's attribute

07-css More articles on Inheritance and cascading of

  1. python The whole development of the stack ,Day47( Row level, block level labels , advanced selectors , Attribute selector , Pseudo class selector , Pseudo element selector ,css The inheritance and cascading of , Stack weight is the same , The box model ,padding,border,margin)

    One .HTML Row level labels and block level labels in Block level label Common block level tags :div,p,h1-h6,ul,li,dl,dt,dd 1. Monopolize one line , Not on the same line as the other elements 2. Can set width and height 3. If you don't set the width and height , The default is body ...

  2. front end ----css The inheritance and cascading of

    css There are two characteristics ; Inheritance and layering inheritance Inherit : Set some properties for the parent , The child inherits the property of the parent , This is our css Inheritance in , It should be noted that There are some properties that can be inherited : color   ,  font ...

  3. 04.CSS The inheritance and cascading of

    CSS There are two characteristics :  Inheritance and layering inheritance The concept of inheritance exists in object-oriented languages , In object-oriented languages , The characteristics of inheritance :  Inherits the properties and methods of the parent class .  that css  It's just setting properties ,  It's not about methods ...

  4. CSS The inheritance and cascading of

    1. inheritance Not all properties can be inherited , Only some properties of text can be inherited . such as :color,text- At the beginning ,line- At the beginning ,font- At the beginning . These attributes can be inherited . The rest is about the box , location , The layout can't be ...

  5. CSS style ----CSS The inheritance and cascading of ( Graphic, )

    CSS Inheritance Let's look at the following code , To introduce inheritance : In the top code , We give div Add red attribute to label , But found ,div Every sub tag in the <p> Also added red attribute . So we came to the conclusion that : There are some attributes ...

  6. 【WEB front end 】CSS Inheritance and layering ( Extremely important )

    1.1 inheritance There are some attributes , When you set it for yourself , All his descendants have inherited it , This is inheritance . Which attributes can inherit ? color. text- At the beginning .line- At the beginning .font- At the beginning . These are about text styles , can ...

  7. css Two characteristics : Inheritance and layering

    css There are two characteristics : Inheritance and layering , inheritance The concept of inheritance exists in object-oriented languages , In an object-oriented language , The characteristics of inheritance : Inherits the properties and methods of the parent class . So we're going to focus on css,css There is no way to , So we just inherit the genus ...

  8. css Inheritance and layering

    css There are two characteristics : Inheritance and layering inheritance The concept of inheritance exists in object-oriented languages , In object-oriented languages , The characteristics of inheritance : Inherits the properties and methods of the parent class . So we're going to focus on css,css It's just setting properties . It's not about methods ...

  9. CSS(4)--- The three major characteristics ( inheritance , Layering , priority )

    CSS(4)--- The three major characteristics ( inheritance , Layering , priority ) CSS There are three characteristics : inheritance , Layering , priority . One . inheritance Concept Set some properties for the parent element , Child elements can also be used , This is what we call inheritance . Be careful 1. ...

  10. front end CSS Inheritance and layering

    CSS There are two characteristics : Inheritance and layering front end CSS Inheritance front end CSS Layering CSS Selector priority front end CSS priority The style is set important

Random recommendation

  1. HackerRank Extra long factorials

    Portal In today's HackerRank Turn up to a high precision question , So I wrote a high-precision template , It's just multiplication . Extra long factorials Authored by vatsalchan ...

  2. Jquery html Page processing basics

    1. How to get the visual height of the browser ?   var windHight = $(window).height(); // Get the visual height of the browser 2. How to get the height of the scroll bar relative to the top ?   var scrollHi ...

  3. uva10791 uva10780( Decomposing prime factor )

    http://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&page=show_problem&p ...

  4. BZOJ 4516: [Sdoi2016] Create a spell [ Postfix automaton ]

    4516: [Sdoi2016] Create a spell The question : Ask a string how many different substrings each prefix has Did a little SDOI2016R1D2, Good water. Whatever AK Force open map On SAM The contribution of each state is \(Max(s)-M ...

  5. Eclipse Personal shortcut key settings and common shortcut keys

    Eclipse The shortcut key setting for automatic prompt of letters in , The details are shown in the following figure , Add capital letters A-Z Two . Common shortcut key settings (1) stay java In the code, press ctrl+O A quick look at the list of properties and methods of a class is shown below (2) stay java Select... In the code ...

  6. 【Linux Learn ten 】 Load balancing brings tomcat Of session Inconsistency

    Environmental Science virtual machine :VMware 10 Linux edition :CentOS-6.5-x86_64 client :Xshell4 FTP:Xftp4 tomcat7 jdk7 session Inconsistency means web The server (tom ...

  7. Hadoop HDFS File block size

    HDFS File block size HDFS Files in are physically partitioned (block), The size of the block can be configured with parameters ( dfs.blocksize) To stipulate , The default size is hadoop2.x In the version is 128M, In the old version, it was 64M ...

  8. LeetCode 4. Median of Two Sorted Arrays &amp; Merge sort

    Median of Two Sorted Arrays When searching for time complexity , See merge sort is more suitable for this topic . Take the median directly , So the point is to sort . Let's look at the governance stage , We need to combine two already ordered subsequences into one ...

  9. iftop – real time Linux Network bandwidth monitoring tools

    In this paper , We put forward another one called Interface TOP (IFTOP) Excellent program ,  It is a network bandwidth monitoring tool based on real-time console . It will show a quick overview of network activity on the interface . Iftop The average 2,10 and 4 ...

  10. JQuery in 2 An equal sign and 3 The difference between two equal signs

    First ,== equality equivalent ,=== identity Identity .==, When the two sides have different value types , Type conversion first , Compare again .===, No type conversion , Different types must be different . Here are the instructions : First say ===, This ...