Div # divbox P span. red {color: red;}. According to our habits, the browser first looks for the DIV element whose ID is divbox, and then finds all the P elements under it, search for all the span elements and apply the style when the class of the span is red. What a simple and easy-to-understand principle, but this understanding is completely opposite and wrong.
Matching Principle:
In the browser, CSS matching is not performed from left to right, but from right to left. For example, in Div # divbox P span. Red {color: red;}, the browser search sequence is as follows:
Search for all span elements in HTML with class = 'red', and find out if the parent element contains p, then, determine whether the parent element of P contains a div element with the ID divbox. If all the elements exist, match.
The advantage of the browser searching from right to left is to filter out irrelevant style rules and elements as soon as possible. For example, the following HTML and CSS:
CopyCode The Code is as follows: <style>
If you search from left to right, you can find many irrelevant P and span elements first. If you search from right to left, you first find the <SPAN class = 'red'> element. Firefox calls this search method key selector (keyword query). The so-called keyword is the last (rightmost) rule in the style rule, and the above key is span. Red.
Simple and efficient CSS:
The so-called efficient CSS allows the browser to perform as few searches as possible when searching for elements matching the style, the following lists some of our common mistakes in CSS writing (which I used to make ):
1. Do not use the tag name before the ID Selector
General Syntax: div # divbox
Better Syntax: # divbox
Explanation: Because the ID selector is unique, adding a div increases unnecessary matching.
2. Do not use the label name before the class selector.
General Syntax: Span. Red
Better Syntax:. Red
Explanation: it is the same as the first one. If you have defined multiple. Red elements with different styles, you cannot remove them. For example, your CSS file is defined as follows:
P. Red {color: red ;}
Span. Red {color: # ff00ff}
If it is defined in this way, do not remove it. After it is removed, it will be confused. However, it is recommended that you do not write it like this.
3. Minimize the use of hierarchical relationships
General Syntax: # divbox P. Red {color: red ;}
Better Syntax:. Red {..}
4. Use class instead of hierarchical relationship
General Syntax: # divbox ul Li a {display: block ;}
Better Syntax:. Block {display: block ;}
PS: I think some people are skeptical about the theory from right to left. Below I will post two related CSS explanations for Firefox and Google.ArticleFor your reference
Mozilla Firefox: https://developer.mozilla.org/en/Writing_Efficient_CSS
Google page-speed: http://code.google.com/intl/zh-CN/speed/page-speed/docs/rendering.html
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
