Basic selector of the CSS3 selector

CSS is a language for on-screen rendering Html,xml, CSS is mainly used in the corresponding elements to apply the style, to render the relative application of the elements, then we choose the corresponding element is very important, how to select the corresponding element, at this time we need to say the selector. Selectors are primarily used to determine the DOM element nodes in the HTML tree structure.

Commonly used selectors for CSS3 are:

Here are a few examples of how a selector can be applied:

1. Create the following DOM structure:

<div class= "Demo" ><ul class= "Clearfix" ><li id= "first" class= "first" >1</li><li class= " Active important ">2</li><li class=" Important items ">3</li><li class=" Important ">4</ Li><li class= "Items" >5</li><li>6</li><li>7</li><li>8</li> <li>9</li><li id= "Last" class= "last" >10</li></ul></div>

2. Add some good-looking styles to it:

. demo {width:300px;border:1px solid #ccc;p adding:10px;} Li {float:left;height:20px;line-height:20px;width:20px;-moz-border-radius:10px;-webkit-border-radius:10px; Border-radius:10px;text-align:center;background: #f36; color:green;margin-right:5px;}

At this point, you can get the following effect:

3. See the wildcard selector (*) below

*{marigin:0;padding:0;}. Demo * {border:1px solid blue;}

Get the following effect:

From the above, as long as the Div.demo under the element border has added a new style. all browsers support wildcard selectors.

4. Look again at the element selector (E)

Element selectors, which are the most common and basic selectors in the CSS selector. Element selectors are actually elements of the document, such as Html,body,p,div and so on, such as our demo: The elements include Div,ul,li and so on.

Li {background-color:grey;color:orange;}

Get the following effect:

5. Next is the class selector (. className)

A class selector specifies a style in a way that is independent of the document element, which requires the class name to be defined on the HTML element before the class selector is used, in other words to ensure that the class name exists in the HTML tag in order to select the class, such as:

<li class= "active important items" >2</li>

One of the "active,important, items" is that we add a class name to Li, so that the class selector works properly, thus better associating the style of the class selector with the element.

{font-weight: bold; color: yellow;}

Get the following effect:

Class selectors can also be used in conjunction with element selectors, for example, you have a lot of elements in your document that use the class name "items", but you just want to modify the style on the class name of the P element, so you can choose and add the appropriate style:

{color: red;}

The above code only matches all P elements that have the class attribute containing important, but none of the other types of elements match, including the element with the class name "items", which also says "P.items" is only for the P element and has a class named "Items". Those that do not meet these conditions will not be selected.
Class selectors can also have a multi-class name, we also see that we LI element in the same time there are two or many class names, where they are separated by a space, then the selector can also use a multi-class connection, such as:

{font-weight: bold;}  {color: green;  Background: lime;}  {color: #fff;  Background: #000;}  {background:#ccc;}  {color: blue;}                

As the code above shows, the ". Important.items" selector only has the "important" and "items" two classes in the element to function:

It is important to note that if a multi-class selector contains a class name in which one does not exist, then the selector will not be able to find a matching element such as the following in this code, he will not be able to find the corresponding element tag, Because there is only one li.first and one li.last in our list, there is a list item called Li.first.last:

{color: blue;}

Class selectors are supported in all browsers, but multi-class selectors (. classname1.classname2) are not supported by IE6.

6.id Selector (#ID)

The ID selector is very similar to the class selector above, and before using the ID selector, you need to first raise the ID name in the HTML document so that the corresponding element is found in the style selector, except that the ID selector is the only value in a page, and we use the class name in the class to precede it with a " .” Number (. className) and the ID selector is used before the name "#" such as (#id)

{background: lime; color: #000;}  {background: #000;  Color: lime;}

The above code selects the list item with the ID "first" and "last", the effect is as follows

There are several places in the ID selector that require special attention.

First: An ID selector in a document is only allowed once, because the ID is unique in the page;

Second, the ID selector cannot be used as many combinations as a class selector, and an element can only name an ID name;

Third, you can use the same ID name in different documents, for example, in "test.html" to H1 "#important", can also be defined in "test1.html" the ID of P is "#important", But only if there is an ID called "#important" in either test.html or test1.html.
The ID selector is supported by all browsers.

7. Descendant selector (E F)

The descendant selector is also called the include selector, and the function is to select the descendant elements of an element, such as: E F, front e is the ancestor element, F is the descendant element, the meaning is to select all the descendants of E element f element, please note that they need a space separated. Here f either the child element of the E element, or the grandchild element, or a deeper relationship, will be selected, in other words, regardless of how many layers of F in E are selected:

{color: blue;}

The above indicates that all the LI elements in Div.demo are selected

Descendant selectors that are supported by all browsers.

8, child element selector (E>F)

The child element selector can only select child elements of an element where E is the parent element and F is a child element, where e>f represents the selection of all child elements under the E element F. This is not the same as the descendant selector (E F), where F is the descendant element of E in the descendant selector, and the child element selector e > F, where F is only the child element of E.

{background: Green; color: yellow;}

The effect is as follows:

IE6 does not support child element selectors.

9. Adjacent sibling element selector (E + F)

Adjacent sibling selectors can select elements immediately following another element, and they have an identical parent element, in other words, the EF two element has an identical parent element, and the f element is behind the e element, and adjacent, so that we can use the adjacent sibling element selector to select the F element.

{background: Green; color: yellow; border: 1px solid #ccc;}

The above code represents the selection of Li's neighboring elements Li, we have a total of 10 Li, then the above code selected from the 2nd Li to 10 Li, altogether nine, see the effect:

IE6 does not support sibling element selectors

10. Universal Brother Selector (E? F

The universal sibling Element selector is a new selector for CSS3, which selects all the sibling elements that follow an element, and they are similar to the neighboring sibling elements and need to be within the same parent element, in other words, the E and F elements belong to the same parent element, and the F element is after the e element, then E ~ F The selector selects the F element after all E elements in. For example, the following code:

{background: Green; color: yellow; border: 1px solid #ccc;}

The above code represents the selection of all the sibling elements Li following the li.active element:

The generic sibling selector is very similar to the adjacent sibling selector, except that the adjacent sibling selector selects only the elements that are adjacent to the element (only one of the selected elements), whereas the generic sibling element selector, which is the next sibling element adjacent to the element, can be confusing, You can take a closer look at the neighboring brothers.
IE6 does not support the use of this selector.

11. Group Selector (Selector1,selector2,..., Selectorn)

Group selectors are groups of elements with the same style, separated by commas "," between each selector, as shown above Selector1,selector2,..., Selectorn. This comma tells the browser, the rule contains a number of different selectors, if there is no such comma, then the meaning of the expression is completely different, omit the comma is what we said before the descendant selector, this is in use, we must be careful caution. Let's look at a simple example:

{background: Green; color: yellow; border: 1px solid #ccc;}

Because Li.first and li.last have the same styling effects, we write them in a group:

Group selectors are supported in all browsers.

The above nine kinds of selectors are the basic selectors in CSS3, and our most commonly used is element selector, class selector, id selector, descendant selector, group selector, and you can use these selectors in practical applications, to achieve the purpose of the line.