Now IE7 has been launched for a period of time and penetrated into users. We don't have to wait too long to use more advanced CSS on the page. The two most useful items will be the Child and Adjacent Sibling selector. It is now time to use them to create web pages and study them in depth.
Note that the selector includes the current symbol, ">", "+", and space (descendant selector), which involves the subselector, adjacent sibling selector, and descendant selector, collectively referred to as the selector.
A better method
It's a good idea to figure out their differences and why they are good before studying them. The reason is simple. It reduces the defect of "class-itis" on the webpage. The main reason is that "class-itis" is very common in the current web pages. Until now, we have a perfect descendant selection character to establish a CSS selector, that is, there is a space between two selectors.
When the descendant selector is used, an element selector on the right is selected, regardless of the number of element selector labels on the left. For example, p a {color: red;} indicates that all links in the paragraph are red. This is a very useful and widely used combination of options.
The representative class-itis series are the same as below. First, you use a very clean html structure and a simple CSS style to build titles, paragraphs, and so on. Then someone tells you that the text color in the first section of each div block needs to be red. You can't just change the style of the target paragraph, because it may affect all, so you are forced to name a special class applied in the first section.
As a result, the same requirements are continued after dozens of times, and the class-itis phenomenon is formed. Why is it so bad and harmful? This is no different from the font tag. Of course, classes allow infinite patterns, but it is always endless chaos, or it may be faster than the subsequent.
For example, if you have added the class attribute to all the first paragraphs, and everything is fine. Now you are told that the first two sections require a style, not only the first one. To use the correct class for the purpose, you must be sure that each of the second sections has a dedicated class. Finally, this habit leads to class everywhere in the source code. It feels like the two old and new styles are fighting and conflicting, which makes people have a headache.
If we only say this to CSS, it may not be bad. In fact, "use the following style to the first and second sections of each div block ." This happens. The latest CSS selector allows us to be smart.
Review
Let's review some terms. W3C CSS2.1 specifications explain selector and combinators ):
"A selector is one or more selectors connected with a selector. Optional characters include space, '>', and '+ '. Spaces may appear between a selector and a simple selector ." A simple selector can be a type selector or a general selector following zero or more attribute selectors, ID selector or pseudo class in any order.