CSS3 Selector Basic Selector Introduction

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. I divided the CSS selector into three parts, the first part is our common part, I call him the basic selector, the second part I call him a property selector, the third part I call him a pseudo-class selector, this part is also the most difficult to understand and grasp the part, today we first look at the first part-the basic selector. Let's start by looking at a list of commonly used selectors.

Selector

Selector	Example	Example Description	CSS
. class	. intro	Select all elements of class= "Intro".	1
#ID	#firstname	Select all elements of id= "FirstName".	1
*	*	Selects all elements.	2
Element	P	Select all <p> elements.	1
element,element	Div,p	Select all <div> elements and all <p> elements.	1
element element	Div p	Select all <p> elements inside the <div> element.	1
element>element	Div>p	Selects all <p> elements of the parent element for the <div> element.	2
element+element	Div+p	Select all <p> elements immediately after the <div> element.	2
[attribute]	[Target]	Selects all elements with the target property.	2
[attribute=value]	[Target=_blank]	Select all elements of target= "_blank".	2
[attribute~=value]	[Title~=flower]	Select all elements of the title property that contain the word "flower".	2
[attribute|=value]	[Lang|=en]	Select all elements with the Lang attribute value beginning with "en".	2
: Link	A:link	Select all links that have not been accessed.	1
: Visited	a:visited	Select all links that have been visited.	1
: Active	A:active	Select the active link.	1
: hover	A:hover	Select the link on which the mouse pointer is located.	1
: Focus	Input:focus	Select the input element that gets the focus.	2
: First-letter	P:first-letter	Select the first letter of each <p> element.	1
: First-line	P:first-line	Select the first line of each <p> element.	1
: First-child	P:first-child	Select each <p> element that belongs to the first child element of the parent element.	2
: Before	P:before	Insert content before the contents of each <p> element.	2
: After	P:after	Insert content after each <p> element's content.	2
: lang (language)	P:lang (IT)	Select each <p> element with a value for the lang attribute that starts with "it".	2
element1~element2	P~ul	Select each <ul> element that has a <p> element in front of it.	3
[attribute^=value]	a[src^= "https"]	Select each <a> element whose src attribute value begins with "https".	3
[attribute$=value]	A[src$= ". pdf"]	Select all <a> elements whose src attribute ends with ". pdf".	3
[attribute*=value]	a[src*= "ABC"]	Select each <a> element that contains the "ABC" substring in its src attribute.	3
: First-of-type	P:first-of-type	Select each <p> element that belongs to the first <p> element of its parent element.	3
: Last-of-type	P:last-of-type	Select each <p> element that belongs to the last <p> element of its parent element.	3
: Only-of-type	P:only-of-type	Select each <p> element that belongs to the <p> element that is unique to its parent element.	3
: Only-child	P:only-child	Selects each <p> element that belongs to the unique child element of its parent element.	3
: Nth-child (n)	P:nth-child (2)	Selects each <p> element that belongs to the second child element of its parent element.	3
: Nth-last-child (n)	P:nth-last-child (2)	Ditto, counting from the last child element.	3
: Nth-of-type (n)	P:nth-of-type (2)	Select each <p> element that belongs to the second <p> element of its parent element.	3
: Nth-last-of-type (n)	P:nth-last-of-type (2)	Ditto, but starts counting from the last child element.	3
: Last-child	P:last-child	Select each <p> element that belongs to the last child element of its parent element.	3
: Root	: Root	Select the root element of the document.	3
: Empty	P:empty	Select each <p> element that has no child elements (including text nodes).	3
: Target	#news: Target	Select the currently active #news element.	3
: Enabled	Input:enabled	Select each of the enabled <input> elements.	3
:d isabled	Input:disabled	Select each of the disabled <input> elements	3
: Checked	Input:checked	Select each <input> element that is selected.	3
: Not (selector)	: Not (P)	Select each element of the non-<p> element.	3
:: Selection	:: Selection	Select the part of the element that is selected by the user.	3

Let's take a look at the basic selector used in the table above and its role, in order to better illustrate the problem, first create a simple DOM structure, as follows:

Copy CodeThe code is as follows:
<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>

Add some style to this demo to make him look good.

Copy CodeThe code is as follows:
. demo {
width:300px;
border:1px solid #ccc;
padding: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;
}

The preliminary results are as follows:

One, wildcard selector (*)
The wildcard selector is used to select all elements, or to select all elements under an element. Such as:

Copy CodeThe code is as follows:
*{
marigin:0;
padding:0;
}

The above code is certainly seen in the Reset style file, and what he is saying is that the margin and padding of all the elements are set to 0, and the other is to select all the elements under an element:

Copy CodeThe code is as follows:
. demo * {border:1px solid blue;}

The effect is as follows;

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

Second, 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.

Copy CodeThe code is as follows: li {background-color:grey;color:orange;}

On the Li element that represents the selection page, and set the background and foreground color, the effect is as follows:

All browsers support element selectors (E).

Iii. 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>
The total "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.

. important {font-weight:bold; color:yellow;}
The above code indicates that the element with the important class name is added with a "bold font, yellow color" style, such as

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:
P.items {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:

Copy CodeThe code is as follows:
. important {Font-weight:bold;}
. active {Color:green;background:lime;}
. Items {color: #fff; background: #000;}
. important.items {background: #ccc;}
. first.last {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:

Copy CodeThe code is as follows:
. first.last {color:blue;}

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

Iv. 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),

Copy CodeThe code is as follows:
#first {background:lime;color: #000;}
#last {background: #000; color:lime;}

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

The ID selector has several places to pay special attention, first: an ID selector in a document is only allowed once, because the ID is unique on the page, and second, the ID selector cannot be used as many combinations as a class selector, and an element can only name an ID name; You can use the same ID name in different documents, such as "#important" for H1 in "test.html", or "#important" for the definition p in "test1.html". But only if there is an ID called "#important" in either test.html or test1.html.

The ID selector is supported by all browsers.

So when do I use ID names? When do you use class naming? I personally think that is the key point is to have a unique use of the ID selector, common, similar to the use of class selectors. when using these two selectors, it is best to distinguish the case from the other.

V. 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:

. demo Li {color:blue;}
The above indicates that all the LI elements in Div.demo are selected

Descendant selectors that are supported by all browsers.

Six, child element selector (E&GT;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.
ul > li {background:green;color:yellow;}
On the code to indicate the selection of all child elements under UL Li. Such as:

IE6 does not support child element selectors.

Seven, 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.

Copy CodeThe code is as follows: Li + li {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:

Because the li+li of the above is the second li is the next element of the first Li, the third is the second adjacent element, so the third is also selected, and so on, so the following nine Li are selected, if we change a way to see, it might be better to understand a little:

Copy CodeThe code is as follows:
. Active + li {background:green;color:yellow; border:1px solid #ccc;}

According to the previous knowledge, this code is obviously selected li.active behind the neighboring Li element, notice and li.active behind the adjacent elements only one.

IE6 does not support this selector

Viii. Universal Brotherhood 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:

Copy CodeThe code is as follows:. Active ~ li {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.

Ix. 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:

Copy CodeThe code is as follows:. First,. Last {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. Then about the first part of the CSS3 selector-the basic selector is introduced here, a bit simple, I hope the first contact with the CSS students have some help, the next section will introduce the second part of the CSS3 selector-attribute selector, interested friends Please note this site update.

If you want to reprint please indicate the source: W3cplus

Http://www.jb51.net/css/41450.html

CSS3 Selector Basic Selector Introduction