CSS3 selector (Basic selector, attribute selector, pseudo-class selector, and Selector Policy)

CSS3 selector (Basic selector, attribute selector, pseudo-class selector, and Selector Policy)
CSS3 basic Selector

1. wildcard selector (*)*{marigin: 0;padding: 0;}Ii. Element selector (E)li {background-color: grey;color: orange;}Iii. class selector (. className)Iv. id selector (# ID)#first {background: lime;color: #000;}#last {background: #000;color: lime;}V. Descendant selector (e f).demo li {color: blue;}6. Child element selector (E> F)ul > li {background: green;color: yellow;}VII. Adjacent sibling element selector (E + F)li + li {background: green;color: yellow; border: 1px solid #ccc;}8. General brother selector (E? F).active ~ li {background: green;color: yellow; border: 1px solid #ccc;}9. Group selector1, selector2,..., selectorN).first, .last {background: green;color: yellow; border: 1px solid #ccc;}

CSS3 attribute Selector

The attribute selectors of CSS3 mainly include the following:

1. E [attr]: only attribute names are used, but no attribute values are determined;
2. E [attr = "value"]: Specifies the attribute name and the attribute value;
3. E [attr ~ = "Value"]: Specifies the attribute name and has an attribute value. This attribute value is a word list separated by spaces. The word list contains a value word, and the "?" Not writable;
4. E [attr ^ = "value"]: Specifies the attribute name and has an attribute value. The attribute value starts with value;
5. E [attr $ = "value"]: Specifies the attribute name and has an attribute value. The attribute value ends with the value;
6. E [attr * = "value"]: Specifies the attribute name, has a property value, and contains value;
7. E [attr | = "value"]: Specifies the attribute name, and the attribute value is a value or a value starting with "value-" (for example, zh-cn );

8. . Demo a [href] [title] {background: yellow; color: green;} // href and title are selected. Demo a [id = "first"] {background: blue; color: yellow; font-weight: bold;} // id = "first" selected

   CSS3 pseudo-class selector1. This is the most common dynamic pseudo class.
   

   . Demo a: link {color: gray;}/* When the link is not accessed, the foreground color is gray */. Demo a: visited {color: yellow;}/* after the link is accessed, the foreground color is yellow */. Demo a: hover {color: green;}/* the foreground color is green when the mouse is suspended over the link */. Demo a: active {color: blue;}/* click the link to activate the link. The foreground color is blue */

   2. Pseudo-class UI element status": Enabled", ": disabled", ": checked" pseudo classes are called pseudo classes of the UI element State. These are mainly for Form Element operations in HTML, the most common example is "type =" text ", which has two statuses: enable and disabled. The former is writeable and the latter is not available; in addition, "type =" radio "and" type = "checkbox" have two statuses: "checked" and "unchecked. Let's look at two instances. For example, if you want to distinguish the text box of "disabled" from other text boxes, you can apply it like this; IE6-8 does not support ": checked", ": enabled ",": disabled "these three selectors
   3. nth Selector
9. : Fist-childSelect the first child element of an element;
10. : Last-childSelect the last child element of an element;
11. : Nth-child ()Select one or more specific child elements of an element;
12. : Nth-last-child ()Select one or more specific child elements of an element, and start from the last child element of the element;
13. : Nth-of-type ()Select the specified element;
14. : Nth-last-of-type ()Select the specified Element and calculate it from the last element;
15. : First-of-typeSelect the first child element of the same type under a parent element;
16. : Last-of-typeSelect the last child element of the same type as the parent element;
17. : Only-childThe selected element is the only element of its parent element;
18. : Only-of-typeSelect an element that is the only child element of the same type of its parent element;
19. : EmptyThe selected element does not contain any content. IE6-8 and FF3-Browsers Do not support ": nth-child,: nth-last-child (),: nth-of-type" Selector4. Negative selector (: not)The negative selector is exactly the same as the: not selector in jq. You can use the elements in form to describe the usage of this selector. For example, you want to add borders to all input fields in form, however, if you do not want to change the submit, you can use: not for implementation.

    input:not([type="submit"]) {border: 1px solid red;}

    5. pseudo elementsWe have seen the pseudo elements in CSS before: first-line,: first-letter,: before,: after; then in CSS3, he made some adjustments to the pseudo elements, in the past, a ":" is added, that is, ": first-letter,: first-line,: before ,:: in addition, ": selection" and ":" and ":" are added to "after". css3 is mainly used to distinguish between pseudo classes and pseudo elements. Currently, both methods are accepted. That is to say, no matter which method is used, the function is the same, but a different writing format is used. Let's take a brief look at their role: first-line selects the first line of the element. For example, we can use this to change the style of the first line of text in each paragraph. : Before AND: after are used to insert content before or after an element,The most common thing I have ever seen is to clear the float.

                .clearfix:before,.clearfix:after {     content: ".";     display: block;     height: 0;     visibility: hidden;  } .clearfix:after {clear: both;} .clearfix {zoom: 1;}

    CSS selector OptimizationInherent efficiency:
20. Id selector (# myid)
    
21. Class selector (. myclassname)
22. Tag selector (div, h1, p)
23. Adjacent selector (h1 + p)
24. Sub-selector (ul> li)
25. Descendant selector (li)
26. Wildcard selector (*)
27. Attribute selector (a [rel = "external"])
28. Pseudo-class selector (a: hover, li: nth-child)