I used to reply to a brother's question in 51js. I was afraid that it would be drowned in the sea of information. Now I am here to show my understanding.
When answering questions from others, it is really a test and Improvement for yourself. On the basis of summing up and figuring out the original fuzzy concept, we should talk about it in a comprehensive, simple, and easy way. It's really not easy. Admire those pioneers who write tutorials to benefit all sentient beings ~!!
The following describes the weight of CSS:
The simple weight can also be understood as the scope in Javascript. Let's look back and think about it. In fact, all the stuff in the IT abstract world is universal.
Embedded style> internal style sheet> external style sheet
For example: < Head >
< Link Href = "Main.css" REL = "Stylesheet" Type = "Text/CSS" />
< Style >
. Txt { Color : Blue ; }
</ Style >
</ Head >
< P Class = "TXT" Style = "Color: Red" > This is a test text </ P >
In main.css:
. Txt {color: Green}
These three items:
Embedded style:
Style = "color: Red"
Internal style sheet: <Style>
. Txt{Color:Blue;}
</Style>
External style sheet:
Main.css
.
This is the general CSS weight level, which is generally used for external use.
Then we will see the usual main.css weight level:
In main.css:
The weight of the ID selector is greater than that of the class selector.
For example: # Test{Color:Red;}
. Test{Color:Blue;}
Where the weight of # test is greater than that of. Test.
What if two same-lived CSS attribute values appear in a CSS file? Of course, with other object-orientedProgram In the language, the overwrite is similar, and the following attributes overwrite the previous attributes. For example: . Test2 { Color : Red ; Border : 1px solid # ccc ; }
. Test2 { Color : Blue ; Font-size : 14px ; }
The final style applied to DOM elements is as follows: Color: Blue; font-size: 14px; Border: 1px solid # CCC;
<! Doctype HTML public "-// W3C // dtd xhtml 1.0 transitional // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <br/> <HTML xmlns = "http://www.w3.org/1999/xhtml" XML: lang = "en"> <br/> <pead> <br/> <title> pride </title> <br/> <meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8 "/> <br/> <style type =" text/CSS "> <br/> * {margin: 0; padding: 0; font-size: 12px ;}< br/>. test2 {color: red; Border: 1px solid # CCC ;}< br/>. test2 {color: Blue; font-size: 14px ;} <br/> </style> <br/> </pead> <br/> <body> <br/> <Div class = "Test2"> this is the content of Test2. </div> <br/> </body> <br/> </ptml> <br/>
RunCode
another case is the extension of the weight under the hierarchy selector, which can save a lot of JS Code when using js to operate dynamic effects. Logically, the separation of presentation and behavior is also perfect.
code highlighting produced by actipro codehighlighter (freeware)
http://www.CodeHighlighter.com/
--> . TXT { color : blue ; }
# wrap. TXT { color : Red ; font-size : 14px ; }
For example:
<! Doctype HTML public "-// W3C // dtd xhtml 1.0 transitional // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <br/> <HTML xmlns = "http://www.w3.org/1999/xhtml" XML: lang = "en"> <br/> <pead> <br/> <title> pride </title> <br/> <meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8 "/> <br/> <style type =" text/CSS "> <br/> * {margin: 0; padding: 0; font-size: 12px ;}< br/>. TXT {color: Blue ;}< br/> # wrap. TXT {color: red; font-size: 14px ;} <br/> </style> <br/> <pead> <br/> <body> <br/> <Div class = "TXT"> This is a TXT text. </ div> <br/> <Div id = "Wrap"> <br/> <Div class = "TXT"> This is another TXT text </div> <br/> </div> <br/> </body> <br/> </ptml> <br/>
Run code
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
