The CSS3 Selector

Large _skylar

Http://www.cnblogs.com/skylar/p/css3-selector.html

Each front-end engineer may write some CSS every day, where selectors are a major part. However, it is not uncommon for people to write mostly #id,.class such selectors every day, but we can simplify our code if we understand and cook the powerful and elegant selectors that CSS3 provides us with.

I'm not going to consider the extent of its browser support when I'm learning and sorting out the CSS3 selector, and if necessary, check out its browser support situation here: "caniuse.com".

First, the basic selector

1. Wildcard selector "*"

1 *{margin:0;padding:0}//Select all elements in the page and set margin and padding value to 0
2. Demo *{background: #000}//Select all elements below the element with the class name demo and set the background to black

2. Element selector "element"

2 ul{background: #fff}//SELECT list UL element

3.ID selector "#id"

1 HTML:
2 <div id= "Demo" ></div>
3 CSS:
4 #demo {do something}

4. Class Selector ".class"

1 HTML:
2 <ul class= "Demo" ></ul>
3 CSS:
4. Demo{do something}
5 Ul.demo{do Something}//This will only select the UL element with the demo class name

It is important to note that multiple page elements can have the same class name, but the ID of the element must be unique on the page.

5. Group Selector "selector1,...,selectorn"

1 HTML:
2 <div class= "Section-1" ></div>
3 <div class= "Section-2" ></div>
4 <div class= "Section-3" ></div>
5 CCSS:
6. Section-1,.section-2,.section-3{do something}//define a common style for three page elements

Second, level selector

6. Descendant selector "e f"

Selects all elements that match f within the element that matches E.

7. Sub-selector "e > f"

Select the immediate child element that matches F of the element that is matched with E.

1 Html:2 <div class= "Parent" > 3 <div class= "Child" ></div> 4 <div class= "Chi               LD "> 5 <div class=" C-child "> 6 <div class=" C-c-child "></div> 7 </div> 8 </div> 9 </div>10 css:12. Parent > Div{do Something}//select only The immediate child element of the. Parent element, which is only selected to the. Children element

8. Adjacent sibling element selector "e + f"

E and F are sibling elements, have the same parent element, and the f element is immediately behind the e element, and the adjacent sibling selector can be used at this time.

1 html:2 <div> 3 <div class= "Demo" >1</div> 4 <div>2</div> 5 <div>3</di V> 6 </div> 7  8 Css:9 demo + div {do something}//will select Div with 2 content

9. General Brotherhood selector "e ~ f"

E and F are sibling elements, have the same parent element, and the F element follows the E element, and E ~ F selects all f elements that follow the E element.

1 html:2 <div> 3 <div class= "Demo" >1</div> 4 <div>2</div> 5 <div> ;3</div> 6 <div>4</div> 7 </div> 8  9 css:10. demo ~ Div {do something}//will be selected inside Div that is 2,3,4-tolerant

Third, pseudo-class selector

10. Dynamic pseudo-class selector "e:link,e:visited,e:active,e:hover,e:focus"

1 e:link{do Something}//Select an element that has a hyperlink defined but the link has not been accessed
2 E:visited{do Something}//Select a hyperlink and link an element that has already been accessed
3 E:active{do Something}//Select a matching E element, and the element is active, often on anchors and buttons
4 E:hover{do Something}//select the matching E element of the mouse stay
5 E:focus{do Something}//select the matching E element, and the element gets the focus

11. Target pseudo-class selector "e:target"

Selects all elements that match E, and the matching element is pointed to by the associated URL.

The popular point is that the URL of the page if it has a typeface such as #something (https://rawgit.com/zhangmengxue/Practice/master/demo.html#section-1): Target is used to match the element with the ID #something (section-1) in the page.

12. Language pseudo-class selector "e:lang (language)"

Used to select an element with the lang attribute specified, with a value of language.

1 HTML:
2 
4 CSS:
5:lang (en-us) {do something}

Sometimes Web pages switch to different language versions, and you can use this selector to do some special processing.

13. State pseudo-Class selector "e:checked,e:enabled,e:disabled"

1 e:checked{do Something}//Match selected radio button or check button in form
2 E:enabled{do something}//Match all of the form elements
3 E:disabled{do Something}//Match all disabled form elements

14. Structure pseudo-class selector "e:first-child,e:last-child,e:root,e:nth-child (n), E:nth-last-child (n), E:nth-of-type (n), E: Nth-last-of-type (n), e:first-of-type,e:last-of-type,e:only-child,e:only-of-type,e:empty"

14.1 [E:first-child]

Used to select the first child element of a particular element.

1 html:2 <ul> 3 <li>1</li> 4 <li>2</li> 5 <li>3</li> 6 <LI&G T;4</li> 7 <li>5</li> 8 </ul> 9 Css:10 ul > li:first-child {do something}//used to select the first L in UL Element I

14.2 [E:last-child]

Used to select the last child element of a specific element.

1 html:2 <ul> 3 <li>1</li> 4 <li>2</li> 5 <li>3</li> 6  <li>4</li> 7 <li>5</li> 8 </ul> 9 Css:10 ul > li:last-child {do something} Used to select the last Li element in UL

14.3 [E:nth-child ()],[e:nth-last-child ()]

One or more specific child elements that are used to select a parent element, where n can be numeric (starting at 1), an expression containing n, or odd (odd), even (even).

The E:nth-last-child () selector is used in the same way as E:nth-child (), and the difference is that the element selected by the E:nth-last-child () is calculated from the beginning of the last child element of the parent element.

1 html:2 <ul> 3 <li>1</li> 4 <li>2</li> 5 <li>3</li& Gt 6 <li>4</li> 7 <li>5</li> 8 </ul> 9 Css:10 ul > Li:nth-child (2n+ 1) {Do something}//used to select the 2n+1 (odd) Li element in UL

14.4 [E:root]

Used to match the root element in the document where element e resides, the root element is always HTML in the HTML document.

14.5 [E:nth-of-type (), E:nth-last-of-type ()]

E:nth-of-type () computes only the child elements of a type specified in the parent element, and when the child element type of an element is not just one, it is useful to use Nth-of-type to select it.

The usage of E:nth-last-of-type () is the same as E:nth-of-type (), and the difference is that Nth-last-of-type () is also calculated from the beginning of the last child element of the parent element.

Li:nth-of-type (3) will identify that it will only select the third Li element, and the other elements will be ignored, such as:

But using Nth-child will be the case:

1 html:2 <ul> 3 <li>1</li> 4 <li>2</li> 5 <div>3</div> 6 <di V>4</div> 7 <li>5</li> 8 <li>6</li> 9 <li>7</li>10 <li> 8</LI>11 </ul>12 ul > Li:nth-child (3) {do something}//will select DIV element with content 3

14.6 [E:first-of-type,e:last-of-type]

: First-of-type and: Last-of-type These two selectors resemble: First-child and: Last-child, the difference is that the type of the element is specified.

1 html:2 <ul> 3 <div>1</div> 4 <div>2</div> 5 <li>3</li> 6 <li>4</li> 7 <li>5</li> 8 <li>6</li> 9 </UL>10 css:11 ul & Gt Li:first-of-type{do something}//will select Li element with content 3

14.7 [E:only-child]

The matching element e is the only child element of its parent element, meaning that the parent element of the matching element has only one child element.

1 html:2 <div class= "Demo" > 3 <p>1-1</p> 4 <p>1-2</p> 5 </div> 6 <div class= "Demo" > 7 <p>2-1</p> 8 </div> 9 css:11. demo > P:only-child{do something}//selects the P element with content 2-1

14.8 [E:only-of-type]

: Only-of-type is used to select an element whose type is unique among all child elements of his parent element. In other words, a parent element has many child elements, and only one of the child elements is unique, so you can use: Only-of-type to select this element.

This property said a bit around the mouth, wrote a simple demo description meaning: [view Source] [run demo]

14.9 [E:empty]

: Empty is used to select elements that do not have any content, even if they are not a single space.

15 negation pseudo class selector "e:not (F)"

Can be used to select all elements except F.

Input:not ([Type=submit]) {do something}//can be used to define styles for all input elements of a form, except for the Submit button

Four, pseudo-elements

The pseudo-elements we used before are: First-letter,:first-line,:before,:after, such. However, the pseudo-elements defined by CSS3 become double colons, which are used primarily to distinguish between pseudo-classes and pseudo-elements. For Ie6-8, only single-colon notation is supported, but the other modern browsers are both available, meaning that pseudo-elements use double colons and single colons in modern browsers.

16"::first-letter"

:: First-letter used to select the first letter of a block of text, often used for text typesetting.

1 HTML:
2 <div>
3 <p>this is Test line.....</p>
4 </div>5 6 css:7 8 div p::first-letter{do something}//will select the first letter T in <p>

17"::first-line"

:: First-line is used to match the first line of text of an element and is also commonly used for text typesetting.

9 CSS:
10
div p::first-line{do something}//will select the first line of text in <p>

18"::before,::after"

:: Before,::after with us before: Before and: After using the same method, they do not refer to the content that is stored in the tag, it is the location where additional content can be inserted with the content property, although the resulting contents will not be part of the DOM. But it can also set styles.

19"::selection"

CSS3 the newly defined pseudo-element:: Selection to match the highlighted text. But before using it, you need to confirm how much your browser supports it.

The browser by default, the text background we selected is blue and the font is white. By using:: Selection, we can change its effect.

:: Selection{background: #ccc; color:red}//This will allow us to customize the text background color and text color we selected.

However, it is important to note that: selection accepts only two attributes, one is background and one is color.

Five, attribute selector

In HTML, by adding attributes to an element and adding some additional information to the element, the property selector can select a specific element by locating the property.

20"e[attr]"

Used to select an element that has a property, regardless of the value of the property.

1 HTML:
2 <div id= "Demo" >
3 <a href= "" id= "test" ></a>
4 <a href= "www.taobao.com" class= "Taobao" ></a>
5 <a href= "#" id= "Show" >
6 </div>7 css:8 A[id]{do Something}//will select a label with ID attribute

21"e[attr=val]"

Used to select an element with attribute attr and a property value of Val.

1 HTML:
2 <div id= "Demo" >
3 <a href= "" id= "Test" title= "test" ></a>
4 <a href= "www.taobao.com" class= "Taobao" ></a>
5 <a href= "#" id= "show" title= "Test" >
6 </div>7 css:8 A[id=test][title]{do Something}//will select a label with the id attribute value of test and a title attribute

22"e[attr|=val]"

E[attr|=val] is used to select an element that has an attribute attr and the value of the property is Val or begins with val-(where-is indispensable).

1 HTML:
2 <div id= "Demo" >
3 <a href= "" id= "Test" title= "test" lang= "zh" ></a>
4 <a href= "www.taobao.com" class= "Taobao" lang= "ZH-CN" ></a>
5 <a href= "#" id= "show" title= "Test" >
6 </div>7 css:8 A[lang|=zh]{do Something}//will select a label with a lang attribute value of zh or an attribute value that begins with zh

23"e[attr~=val]"

When an attribute of an element has multiple attribute values separated by spaces, use E[attr~=val] as long as the attr attribute has a multiple attribute value in which a Val match element is selected.

1 HTML:
2 <div id= "Demo" >
3 <a href= "" id= "Test" title= "test First" ></a>
4 <a href= "www.taobao.com" class= "Taobao Web" title= "second Test" ></a>
5 <a href= "#" id= "show" title= "Test" >
6 </div>7 css:8 A[title~=test]{do Something}//will select a label that has the title attribute and one of the property values is test

24"e[attr^=val]"

The attribute value used to select the attribute attr is all elements beginning with Val, note that it differs from e[attr|=val], attr|=val-is essential, that is, to start with val-.

1 HTML:
2 <div id= "Demo" >
3 <a href= "http://zhangmengxue.com" id= "test" title= "test First" ></a>
4 <a href= "www.taobao.com" class= "Taobao Web" title= "secondtest" ></a>
5 <a href= "#" id= "show" title= "Testlink" >
6 </div>7 css:8 A[href^=http]{do Something}//will select a tag with the href attribute beginning with http

25"e[attr$=val]"

This selector is exactly the same as E[attr^=val], which is used to select an element with the attr attribute and the attribute value ending in Val.

1 HTML:
2 <div id= "Demo" >
3 <a href= "http://zhangmengxue.com/header.png" id= "test" title= "test First" ></a>
4 <a href= "www.taobao.com/title.jpg" class= "Taobao Web" title= "secondtest" ></a>
5 <a href= "#" id= "show" title= "Testlink" >
6 </div>7 css:8 A[href$=png]{do Something}//will select a tag with the href attribute ending in png

The CSS3 Selector