Low weight principle--avoiding misuse of sub-selectors

The CSS selector is weighted, and when the style settings for the different selectors conflict, the style is set with a high weight selector.

If the CSS selector weights the same, the style follows the nearest principle, which selector is the last defined, and which selector style is used.

If you ignore the CSS selector weight, you will have unexpected little trouble.

Requirements and Solutions

Copy Code code as follows:


<style type= "Text/css" >


#test {font-size:14px;}


</style>


<p id= "test" >CSS selector weight is important </p>

Now you need to set the "very important" three words to red, we do the following:

Scheme I, using the sub selector

Copy Code code as follows:


<style type= "Text/css" >


#test {font-size:14px;}


#test span {color:red}


</style>


<p id= "test" >css selector weight <span> very important </span></p>

Scenario two, new class

Copy Code code as follows:


<style type= "Text/css" >


#test {font-size:14px;}


. Red {color:red;}


</style>


<p id= "test" >css selector weight <span class= "Red" > Very important <span></p>

Many engineers recommend using scenario one, because using a child selector avoids adding class and makes the HTML code simpler. It makes sense to think so, but if there is a change in demand, you need to add new text in.

Change the demand

Copy Code code as follows:


<style type= "Text/css" >


#test {font-size:14px;}


#test span {color:red}


</style>


<p id= "test" >css selector weight <span> very important </span> we have to be careful with </p>

Require ' care ' to be set to green, we may do so.

Copy Code code as follows:


<style type= "Text/css" >


#test {font-size:14px;}


#test span {color:red}


. green {color:green;}


</style>


<p id= "Test" >


CSS Selector Weights <span> Very important </span> we want to <span class= "green" > Handle <span></p> carefully

The thought of ' careful handling ' would be set to green, but the #test span with a higher weight would be set to red. The child selector inadvertently affects our newly added code. If you want to meet our expectations, rewrite the code as follows

Copy Code code as follows:


<style type= "Text/css" >


#test {font-size:14px;}


#test span {color:red}


#test. Green {Color:green}


</style>


<p id= "Test" >


CSS Selector Weights <span> Very important </span> we want to <span class= "green" > handle <span></p>

carefully

And if you use scenario two, what would happen?

Copy Code code as follows:


<style type= "Text/css" >


#test {font-size:14px;}


. Red {color:red;}


. green {color:green;}


</style>


<p id= "test" >css selector weight <span class= "Red" > Very important <span> we want <span class= "green" > Careful handling <span ></p>

Because there are no child selectors, we can successfully complete the style setup by hanging the new class on the newly added code.

Summary
Using a child selector increases the weight of the CSS selector, the higher the CSS selector weight, the less easily overridden the style, and the easier it is to have an effect on other selectors. So, unless you make sure that the HTML structure is very stable and won't be modified, try not to use a child selector. To ensure that styles are easy to cover and improve maintainability, CSS selectors need to keep weights as low as possible.

Low-weight principle-avoid abusing the child selector