A wide range of CSS3 selector and css3 Selector

A wide range of CSS3 selector and css3 Selector

Author: big value _ skylar
Http://www.cnblogs.com/skylar/p/css3-selector.html

Each front-end engineer may write some css every day, and the selector is a major part. However, you may write mostly # id ,. class selectors are not uncommon, but if we understand and are familiar with the powerful and elegant selectors that css3 provides for us, we can simplify our code.

I will not consider the degree of support of its browser when learning and sorting out the css3 selector. If necessary, you can view its browser support here: "caniuse.com 」.

I. Basic Selector

1. wildcard selector 「*」

1 * {margin: 0; padding: 0} // select all elements on the page and set the margin and padding values to 0.
2. demo * {background: #000} // select all elements under the element named demo and set the background to black.

2. Element Selector 」

1 body {background: # ccc} // select the body Element
2 ul {background: # fff} // select the ul element in the list.

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 ul element with demo class name

Note that multiple page elements can have the same class name, but the element id must be unique on the page.

5. Group 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 public style for the three page elements

2. Hierarchy Selector

6. Descendant selector "e f 」

Select all elements matching F in the element matching E.

1 html: 2 <div class = "parent"> 3 <div class = "child"> </div> 4 <div class = "child"> 5 <div class = "c-child "> 6 <div class =" c-child "> </div> 7 </div> 8 </div> 9 </div> 10 11 css: 12 13. parent div {do something} // select all the divs in the parent, whether it is a child element. child or sun element. c-child and. c-child

7. Sub-Selector "E> F 」

Select the immediate sub-element matching F for the matching element of the matching E.

1 html: 2 <div class = "parent"> 3 <div class = "child"> </div> 4 <div class = "child"> 5 <div class = "c-child "> 6 <div class =" c-child "> </div> 7 </div> 8 </div> 9 </div> 10 11 css: 12. parent> div {do something} // only select. the child element of the parent element, that is, only the child element is selected. child Element

8. Adjacent sibling element selector "E + F 」

E and F are peer elements with the same parent element, and F elements are adjacent to the eElements. In this case, adjacent sibling selectors can be used.

1 html: 2 <div> 3 <div class = "demo"> 1 </div> 4 <div> 2 </div> 5 <div> 3 </div> 6 </div> 7 8 css: 9 10. demo + div {do something} // select the div whose content is 2

9. General brother selector "E ~ F 」

E and F are peer elements, have the same parent element, and F elements after the Eelement, E ~ F Selects all F elements after the Eelement.

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 11. demo ~ Div {do something} // select the div whose content is 2, 3, and 4.

Iii. Pseudo-class selector

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

1 E: link {do something} // select the element that defines the hyperlink but the link has not been accessed
2 E: visited {do something} // select the element that defines the hyperlink and the link has been accessed.
3 E: active {do something} // select the matching Eelement and the element is activated. It is often used on the anchor and button.
4 E: hover {do something} // select the matching Eelement with the cursor
5 E: focus {do something} // select the matching Eelement and obtain the focus.

11. target pseudo-class selector "E: target 」

Select all elements matching E, and the matching element is directed by the relevant URL.

In layman's terms, if a page url carries a word like # something (https://rawgit.com/zhangmengxue/Practice/master/demo.html#section-1), then: target is used to match the element in the page where id is # something (section-1.

12. language pseudo-class selector "E: lang (language )」

Used to select an element with the lang attribute specified. Its value is language.

1 html:
2 3 
4 css:
5 :lang(en-US) {do something}

Sometimes, you can use this selector to perform some special operations when switching between different language versions.

13. Status pseudo-class selector "E: checked, E: enabled, E: disabled 」

1 E: checked {do something} // match the selected radio button or check button in the form
2 E: enabled {do something} // matches all used 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 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 11 ul> li: first-child {do something} // select the first li element in ul.

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} // select the last li element in ul.

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

It is used to select one or more specific child elements of a parent element, where n can be a value (starting from 1) or an expression containing n, it can also be odd (odd) or even (even ).

E: nth-last-child () selector is used in the same way as E: nth-child (). The difference is that E: nth-last-child () the selected element starts from the last child element of the parent 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: 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 is located. In the html document, the root element is always html.

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

E: nth-of-type () only calculates a type of child element specified in the parent element. When the child element type of an element is not just one, it is useful to use nth-of-type.

E: nth-last-of-type () is used in the same way as E: nth-of-type (). The difference is: nth-last-of-type () it is also counted from the last child element of the parent element.

Li: nth-of-type (3) indicates that only the third li element is selected, and other elements are ignored, for example:

1 html: 2 <ul> 3 <li> 1 </li> 4 <li> 2 </li> 5 <div> 3 </div> 6 <div> 4 </div> 7 <li> 5 </li> 8 <li> 6 </li> 9 <li> 7 </li> 10 <li> 8 </li> 11 </ul> 12 13 ul> li: nth-of-type (3) {do something} // select the li element whose content is 5.

However, using nth-child will be like this:

1 html: 2 <ul> 3 <li> 1 </li> 4 <li> 2 </li> 5 <div> 3 </div> 6 <div> 4 </div> 7 <li> 5 </li> 8 <li> 6 </li> 9 <li> 7 </li> 10 <li> 8 </li> 11 </ul> 12 13 ul> li: nth-child (3) {do something} // select the div element whose content is 3.

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

: First-of-type and: last-of-type selectors are similar to: first-child and: last-child. The difference is that the element type 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> li: first-of-type {do something} // The li element whose content is 3 is selected.

14.7 [E: only-child]

The matched element E is the unique child element of its parent element, that is, the parent element of the matched 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 10 css: 11. demo> p: only-child {do something} // The p element whose content is 2-1 is selected.

14.8 [E: only-of-type]

: Only-of-type is used to select an element. Its type is unique among all child elements of its parent element. That is to say, a parent element has many child elements, and only one of them has a unique type, so you can use: only-of-type to select this element.

This property is a bit difficult to say. I wrote a simple demo Description: [view the source code] [run demo]

14.9 [E: empty]

: Empty is used to select elements without any content, even elements without spaces.

15. Negative pseudo-class selector "E: not (F )」

It can be used to select all elements except F.

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

4. pseudo elements

In the past, we used the following pseudo elements: first-letter,: first-line,: before,: after. But the pseudo elements defined in css3 are converted into double colons, which are mainly used to distinguish between pseudo classes and pseudo elements. For IE6-8, only a single colon representation is supported, but either of the other modern browsers can, that is to say, in modern browsers, the use of double colons and single colons for pseudo elements will be recognized.

16 「: first-letter 」

: First-letter is used to select the first letter of a text block. It is often used in text layout.

1 html:
2 <div>
3 <p> this is test line... </p>
4 </div> 5 6 css: 7 8 div p: first-letter {do something} // The first letter t in <p> is selected.

17 「: first-line 」

: First-line is used to match the first line of text of an element. It is also commonly used in text layout.

1 html: 2 <div> 3 <p> 4 this is first line .......... omitted ....... 5 this is the second line... omitted .... 6 </p> 7 </div> 8
9 css:
10
11 div p: first-line {do something} // The first line of text in <p> is selected.

18 ": before,: after 」

: Before,: after is used in the same way as before and: after. They do not mean the content in the tag, is used together with the content attribute to insert additional content. Although the generated content is not part of the DOM, it can also set styles.

19 「: selection 」

The newly defined pseudo element of css3: selection is used to match the highlighted text. However, before using it, you need to confirm the degree of support of the browser.

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

: Selection {background: # ccc; color: red} // After rewriting, the selected text background color and text color can be customized.

However, note that: selection only accepts two attributes: background and color.

V. Attribute Selector

In html, by adding attributes to an element and adding additional information to the element, the attribute selector can select a specific element by locating the attribute.

20 「 E [attr] 」

Used to select an element with an attribute, regardless of its value.

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} // The a tag with the id attribute will be selected.

21 「 E [attr = val] 」

Used to select an element with the attr attribute and the attribute value is 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} // a tag with the id attribute value test and title attribute will be selected.

22 "E [attr | = val]"

E [attr | = val] is used to select an element with the attr attribute whose value is val or whose value starts 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} // a tag with the lang attribute value zh or the attribute value starting with zh will be selected

23 「 E [attr ~ = Val]"

When an attribute of an element has multiple attribute values separated by spaces, E [attr ~ = Val] As long as one of the multiple attribute values of the attr attribute matches the val element, it 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} // a tag with the title attribute and a property value of test will be selected.

24 「 E [attr ^ = val] 」

It is used to select all elements whose attribute values start with val. Note the difference between attr and E [attr | = val]. In attr | = val,-is indispensable, that is to say, it starts 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} // The a tag starting with http in the href attribute will be selected.

25 「 E [attr $ = val] 」

This selector is opposite to E [attr ^ = val] and is used to select an element with the attr attribute and the attribute value ending with 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} // The a tag ending with png in the href attribute will be selected.