CSS style Sheet: detailed introduction to IE7 new supported selectors

css| style Sheet

Now that IE7 has been introduced for some time and has penetrated the user, we can use more advanced CSS on the page without waiting long. The two most useful items will be child and adjacent sibling neighboring sibling selectors. It's time to use them to make Web pages and study them more deeply.

Note that selectors include current symbols, ">", "+" and spaces (descendant selectors), involving child selectors, neighboring sibling selectors, descendant selectors, collectively known as selectors.

A better way.

Before we look at selectors, it's a good idea to figure out how they are different and why they are good things. The reason is simple, it reduces the Web page's "Class-itis" Malady. The main reason is that "class-itis" is very common in the current Web page, until now, we have to create a matching CSS selector and support the perfect descendant selector, that is, two selectors between the spaces.

When using descendant selectors, an element selector on the right is selected, regardless of the element selector tag on the left. For example, p a{color:red;}, meaning that all links in a paragraph are red. This is very useful and is a fairly broad selection combination.

The series of Representative Class-itis is the same as below. First, you use a very good clean HTML structure to use simple CSS styles to build headings, paragraphs, and so on. Then someone tells you that the text color needs to be red in the first paragraph of each div block. You can't just change the style of the target paragraph, because that might affect all, so you're forced to name a special class application in the first paragraph.

So dozens of times the same request continued behind, resulting in the formation of the class-itis phenomenon. Why do you say this is bad and harmful? Because it's no different than the font label. Of course, classes allows infinite tricks, but immediately followed by infinite chaos, or perhaps faster than the subsequent.

For example, suppose you've added class attributes to all the first paragraphs, and everything is fine. Now you are told that the first two paragraphs need to be styled, not just the first. To accomplish the purpose with the correct class, you must be sure that each of the second paragraph has a dedicated class. Finally, this habit leads to the source code everywhere is class, feeling like the new and old two styles in the fight conflict, let a person headache.

If we're only talking about CSS it's not necessarily bad, actually "use the following styles to the first and second paragraphs of each div block." "This is happening, and the latest CSS selectors allow us to play smart."

Review and review the following

Let's review some of the terms. The CSS2.1 specification for the consortium explains selectors (selectors) and selection (combinators):

"A selector is one or more selectors that are connected by a selector." Selectors include: spaces, ' > ' and ' + '. A space may appear between a selector and a simple selector. "A simple selector can be a type selector or a generic selector following 0 or more attribute selectors, ID selectors or pseudo classes, in any order."

The first supported selector (also often called a selector, which is the only correct part) is a child selector. Specify the ">" symbol between the simple selectors. A simple example, #leftcol >p{color:blue;}, meaning that the color of all sub paragraph text below #leftcol is blue.

But if #leftcol has a Div, and div has a paragraph, #left the >p selector will not make the text in this paragraph blue, because the child selector, unlike the frequently used descendant selector, chooses only the direct child, not the ">" A nested descendant of any depth of the left element of the symbol.

Another new supported selector will be an adjacent selector, using the "+" symbol. A child selector can point to the Kobe of another element, and an adjacent selector can point to the following element, but is independent of the preceding element. Example, h2+p {Color:blue}, the text color of the following paragraph followed by the H2 element is blue.

Now that you understand how selectors work, we begin to look at complex syndication elements to see if we can achieve the goal without using class.

Author: John Gallant, Holly Bergevin translator: w3cpro.cn

Original address: http://www.communitymx.com/content/article.cfm?cid=1C603

Translation Address: http://www.w3cpro.cn/article/xhtmlcss/124.html