Css selector and css3 Selector

Css selector and css3 Selector

Css selector is commonly used. I hope it will be helpful to you.

1,*: General Selector

1  * {2      margin: 0;3      padding: 0;  4 }

Select all elements on the page, which is usually used to clear the default style of the browser. It is not recommended.

2,# Id: id Selector

1  #id {2        width：1200px;3        height: 500px;  4 }    

The priority level is high, and the id name should be unique.

3,. Class: class selector

1  .class {2           width: 1200px;3           height: 500px;4 } 

The class name can be repeated and can be decorated with multiple elements.

4. tagName: Tag Selector

1  div {2        width: 1200px;3        height: 500px;4 }  

Search for all specified tags on the page

5. selector1 selector2: descendant Selector

1  div p {2          width: 1200px;3          height: 500px;4 }  

For example, find all p labels of the div descendant

6. selector1> selector2: Sub-Selector

1  div > p {2            width: 1200px;3            height: 500px;4 }

For example, find all p labels of the div subclass (only subclass)

7. selector1 + selector2: adjacent Selector

1  div + p {2            width: 1200px;3            height: 500px;4 }

For example, find the p tag adjacent to the div

8. selector1 ~ Selector2: sibling Selector

1 div ~ p {2           color: red;  3 }

For example, find all the p labels of the same level behind the div

9. Attribute Selector

1Selector [title]:

1 p [id] {/* Find the p tag containing the id attribute */2 color: red; 3}

2 selector [href = "foo"]

1 a [href = "www.baidu.com"] {/* search for href = "a tag of www.baidu.com" */2 color: black; 3}

3Selector[Href ^ ="Foo"] 

1 a [href ^ = "http"] {/* search for a tag starting with http in href */2 color: black; 3}

4Selector[Href $ ="Foo"]

1 a [href $ = "rar"] {/* search for a tag whose href has ended with rar */2 color: black; 3}

5Selector[Href * ="Foo"]

1 a [href * = "o"] {/* Find the tag whose href contains 'O' */2 color: black; 3}

6Selector[Class ~ ="Foo"]

1 p [class ~ = "B"] {/* class name is a p tag with spaces at the front or backend of B (a tag that separates multiple values by spaces <div class = "a B"> </div >) */2 color: black; 3}

7Selector[Class | ="Foo"]

1 p [class | = "B"] {/* The class name is B and B is followed by a horizontal bar p tag (<div class = "B-c"> </div>) */2 color: black; 3}

 10. pseudo Selector

　　1 selector:Link normal status (default ).

2 selector: After visited is clicked

3 selector: When the hover mouse is placed on the connection

4 selector: When the active connection is down

5Selector: The checked button is selected (input [type = radio]: checked)

6 selector: before,Selector: after

7Selector1: not (selector2) returns the inverse

8Selector: First-lineSelect the first line under the tag

9Selector: First-letterSelectThe first word under the tag

10Selector: SelectionSelect selected text

11Selector: First-child (p: first-child)Find P, then find the parent of P, and then find the first element under the parent is P (matching the first child element of a parent element, can be said to be the first child element in the structure .)

12Selector:First-of-type (p: first-of-type)Find P, then find the parent of P, and then find the first element under the parent is P (matching the first element of this type, here the limit is no longer the first child element, as long as it is the first element of this type, of course, the scope of these elements belongs to the same level, that is, the same generation .)

13Selector:Last-child (p: last-child)Locate P and find the parent of P. Then find the last element of the parent is P.

14Selector:Last-of-type(P: last-of-type)Locate P and find the parent of P. Then find the last element of the parent is P.

15Selector: Nth-child (2)(Li: nth-child (2 ))Find the li and then find the li parent. Then find the second element under the parent level, which is li.

16Selector: Nth-Of-type(2)(Li: nth-Of-type(2) locate li and find the parent of li. Then find the parent. The second element is li.

17Selector: Nth-Last-Child (2)(Li: nth-Last-Child (2) find li, then find the parent of li, and then find the last and second element of the parent level is li

18Selector: Nth-Last-Of-type(2)(Li: nth-Last-Of-type(2) find li and then find the parent of li and then find the last and second element of the parent level is li

19Selector: Nth-child (even )(Li: nth-child (even) finds all even bits (2N) of li)

20Selector: Nth-Last-child(Even)

21Selector: Nth-child (Odd)(Li: nth-child (Odd) Locate all odd digits of li (2N-1 or 2n + 1)

22Selector: Nth-Last-child(Odd)

23Selector:Only-child (Li: only-child)Find that li is the unique child element of the parent level (the selector selects only one child element in the parent element, and only one child element exists)

24Selector:Only-Of-type (Li: only-of-type) indicates that an element has many child elements, and only one type of child element is unique. the only-of-type selector can select the only type child element in this element.