CSS development is used. Because there are descendant elements, when a parent class already exists (correct is called descendant, I will make the mistake, defines a parent-child relationship style. Does the final style use the parent class or parent-child class?
Write a run and you will know the result. I won't say the answer.
Why?
I have read from right to left in a book, but I can't remember the title of the book. I even read all my books, but I can't find them because they are electronic books, searching is inconvenient. It seems that my habits are not very good. I have seen things and often have a general impression. However, I am a person pursuing "correctness" and hope to give authoritative explanations.
A good memory is not as bad as a pen. It seems that I should record all the details that I think are useful. Maybe I am too lazy. It seems that there are many problems to change in 2013!
Let some things become a kind of inertia, rather than forcing yourself to cultivate some good habits for yourself by the way. Come on in 2013!
With the help of the search engine, I searched for keywords and found the words similar to what I saw (Source: http://developer.51cto.com/art/201009/226852.htm ):
For example, div # divbox P span. red {color: red;}: the browser's search order is as follows: first, search for all the span elements of class = 'red' in HTML. Then, check whether the parent element contains the P element, and then determine whether the parent element of P contains the DIV element with the ID divbox. If all 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:
If you search from left to right, you can find many irrelevant P and span elements first. If you search from left to right, 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.
Appendix:
Selector priority
After learning about various selectors, another important point is the priority of CSS selectors. That's why PolarisArticle. A simple example:
If the font in the span under. Polaris has been set to Red:
If you want to change the. beijixing color to blue, the following command cannot be used:
This is because the priority of the next command is not enough. When two conflicting style settings are set, the browser will only execute the one with a higher priority.
So how do we set the priority of the selector?
Generally, the more special a selector is, the higher its priority is. That is, the more accurate the selector points, the higher its priority. Generally, we use 1 to indicate the priority of the tag name selector, 10 to indicate the priority of the class selector, and 100 to indicate the priority of the ID selector. For example, in the previous example, the selector priority of. Polaris span {color: red;} is 10 + 1, that is, 11, and the priority of. Polaris is 10. the browser will naturally display red characters. After understanding this truth, the following priority calculation is easy:
The principle of using different selectors is as follows: first, accurately select the tag to be controlled; second, use the selector with the most reasonable priority; third, HTML and CSS.CodeTry to be concise and beautiful. Generally:
1. The most common selector is the class selector.
2. Li, TD, DD, and so on often appear in large numbers consecutively, and the style is the same or similar. We use the descendant selector that combines the class selector with the label name selector. select the XX Li/TD/DD {} method.
3. In rare cases, the ID selector is used. Of course, many front-end developers prefer header, footer, banner, and conntent to be set to ID selector, because the same style cannot be used twice on a page.
Here, we have to use the method of introducing CSS into the tag to write CSS, that is:
At this time, the priority is the highest. We give it a priority of 1000, which is not recommended for beginners. This completely violates the idea of separation of content and display. The advantages of Div + CSS cannot be further reflected.
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
