Learn about the search and match principles of CSS

Source: Internet
Author: User

Look at 1 simple css:

Div#divbox p span.red{color:red, according to our understanding of this CSS, the browser first looks for the DIV element with ID Divbox, and when found, finds all the p elements below it, and then finds all span elements, When a span is found to be red, the style is applied. How simple and understandable the principle, but this understanding is completely opposite, wrong.


Matching principle:

Browser CSS matching is not lookup from left to right, but from right to left. For example Div#divbox p span.red{color:red, the browser's lookup order is as follows:

First look for all class= ' red ' span elements in HTML, find out if there are p elements in their parents ' elements, and then determine if there is a DIV element with ID divbox in the parent element of P, if all exist then match.

The benefit of browsers looking from right to left is to filter out extraneous style rules and elements as early as possible. For example, HTML and CSS as follows:

The code is as follows:

<style>
Div#divbox p span.red{color:red;}
<style>
<body>
<div id= "Divbox" >
<p><span>s1</span></p>
<p><span>s2</span></p>
<p><span>s3</span></p>
<p><span class= ' Red ' >s4</span></p>
</div>
</body>


If you search from left to right, you will find many unrelated p and span elements first. If you search from right to left, you first find the elements of the <span class= ' Red ' >. Firefox called this search method for key selector (keyword query), the so-called keyword is the final (rightmost) rules of style rules, the above key is span.red. &NBSP


Concise, efficient css: 
The so-called efficient CSS is to let the browser find the style matching elements as far as possible, the following list of some of our common writing CSS to make some inefficient errors ( I used to make mistakes, and I always thought it was efficient to write it:  

1. Do not use the label name before the ID selector  
General writing: div#divbox 
Better: #divBox  
Explanation: Because the ID selector is unique, adding a Div adds an unnecessary match. &NBSP

2. Do not use the label name before the class selector  
General writing: span.red 
better:. RED&NBSP
Explanation: Same as the first, But if you define more than one. Red, and under different elements is the style is not the same, you can not remove, such as your CSS file is defined as follows:  
p.red{color:red;} &NBSP
Span.red{color: #ff00ff} 
If this definition is not removed, it will be confused when removed, but it is advisable not to write   like this;
3. Use hierarchical relationships   as little as possible;
General wording: #divBox P. red{color:red;} &NBSP
Better:. red{.} &NBSP

4. Use class instead of hierarchical relationship  
General writing: #divBox ul Li A{display:block; &NBSP
Better:. Block{display:block;} &NBSP

PS: See some students in the right to the left of the theory to remain skeptical, below posted Firefox and Google's 2 related CSS interpretation of the article for everyone to refer to  

Mozilla Firefox:

GooglE page-speed:l

Related Article

E-Commerce Solutions

Leverage the same tools powering the Alibaba Ecosystem

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.