30 CSS selectors you don't know

1. Five Basic Selector

1. * (wildcard)
* Wildcard selector, often usedCSSReset (style resetting) to clear the default style of the tag, but it is generally not recommended to directly use *, mainly because * will match all tags, which is quite resource-consuming. * The CSS has the lowest priority.

* {Margin: 0; padding: 0;} You can also use * to match all child elements under an element:

# Container * {border: 1px solid black ;}

2. # X (ID)
# + ID: this is a common CSS Selector Used to match elements whose ID is XXX. The advantage of ID selector is precision and high priority (the priority base is 100, much higher than Class 10), as the best choice for Javascript script hooks, the same disadvantage is also obvious: the priority is too high, the reusability is poor, so before using the ID selector, we 'd better ask ourselves, is it true that the ID selector is not used?

# Container {width: 960px; margin: auto ;}

3. X (class)
. + Class name, standard style selector. The difference from ID selector is that the style selector can select multiple elements. The style selector is a recommended selector and the most frequently used selector by daily front-end personnel.

. Error {color: red ;}

4. x Y (descendant)
Li a {text-Decoration: none ;}
Currently, CSS selectors are commonly used to select the sub-element y under the X element. Note that this method selects all matched sub-elements under the sub-element, regardless of the level, therefore, in some cases, it is not suitable. For example, the above Code removes the underlines of all a under Li, but there is also ul in Li. I do not want the underlines OF A under ul to be removed.

When using this child selector, consider whether you want a style to work for all child elements.

This type of child selector also plays a role in creating namespaces. For example, the scope of the above Code style is obviously Li.

5. X (TAG)
A {color: red ;}
Ul {margin-left: 0 ;}
The label selector has a higher priority than * and is often used in CSS reset (style resetting ).

Ii. CSS selectors supported by browsers other than IE6

 

6. x: link X: visited X: hover X: Active
A: link {color: red ;}
A: visted {color: Purple ;}
Pseudo-class selector, visted accessed styles, hover mouse styles, and link unaccessed styles. Three pseudo-class selectors are commonly used for links, but they do not apply only to links. Unfortunately, IE6 only supports these three pseudo-class selectors for links.

Here, the relationship between CSS priorities (later than the previous priorities) indicates that the writing sequence of these pseudo classes is generally link, visted, hover, and active.

7. X + Y (adjacent)
Ul + P {color: red ;}
The adjacent selector matches the first P after UL and sets the text color in the paragraph to red. (Match only one element)

8. x> Y (sub)
Child selector: Pay attention to the difference between X> Y and x y. The former is the Child selector, that is, ignore the hierarchy, while x y is the word selector, which only matches the child element y under X.

In theory, x> Y is a recommended selector. Unfortunately, IE6 does not support it.

9. x ~ Y
Ul ~ P {color: red ;}
Adjacent selector, similar to X + Y. The difference is that X ~ Y matches the element set. For example, if the code above matches all adjacent ul P

10. X [title]
A [title] {color: green ;}
Property selector. For example, the code above matches the link element with the title attribute.

11. X [Title = ""]
A [Title = "Maomao"] {color: #096 ;}
Attribute selector. The code above matches not only the title attribute, but also the link element with the title attribute equal to Maomao. In [], you can use not only the title attribute, but also other attributes.

12. X [Title * = ""]
A [Title * = "Mao"] {color: #096 ;}
If the * sign is added, fuzzy match is performed. For example, the title attribute is Mao, Maomao, maomao520, and other Link Attributes With Maomao are matched.

13. X [Title ^ = ""]
A [Title ^ = "Maomao"] {color: #096 ;}
Fuzzy match is opposite to *. ^ is used for exclusion. For example, the above code matches the title attribute without the Maomao link attribute.

14. X [href $ = ""]
A [href $ = ". PNG"] {color: red ;}
Secret.

15. X [data-* = ""]
A [data-filetype = "image"] {color: red ;}
Currently, the data-filetype attribute is rarely used, but it is useful in some scenarios. For example, if I want to match all links whose data type is image, the method of using X [href $ = ""] is as follows:

A [href $ = ". jpg "], a [href $ = ". JPEG "], a [href $ = ". PNG "], a [href $ = ". GIF "] {color: red ;}

Data-filetype is used as long:
A [data-filetype = "image"] {color: red ;}
Of course, the premise is that you add the data-filetype attribute to each link.

16. X [Foo ~ = ""]
A [data-info ~ = "External"] {color: red ;}
A [data-info ~ = "Image"] {border: 1px solid black ;}
This is also a very small selector, plus ~ For example, if you have a data-filetype = "external image" attribute, I want to control the external and image styles respectively.

A [data-info ~ = "External"] {color: red ;}
A [data-info ~ = "Image"] {border: 1px solid black ;}
The above code matches a of data-filetype = "external", data-filetype = "image", and data-filetype = "external image.

17. X: checked
Input [type = RADIO]: checked {border: 1px solid black ;}
This pseudo-class selector is only used to match elements with the checked attribute, such as radio and checkbox, that is, single-choice and multi-choice boxes.

Currently, this pseudo-class selector is not supported in ie9, and is basically supported by non-ie browsers.

3. CSS selectors supported by browsers except IE8 and earlier

 

18. X: After
. Clearfix: After {content: ""; display: block; clear: Both; visibility: hidden; font-size: 0; Height: 0 ;}

. Clearfix {* display: inline-block; _ Height: 1%; 0}
I think the above Code, many of my friends are very familiar with it. It is often used to clean up floating hack methods. : Used in combination with the after pseudo class and content to Append content to the element class. The: After pseudo-class has another usage: it is used to generate shadows.

19. X: hover
Div: hover {Background: # e3e3e3 ;}
As mentioned earlier, hover only supports a's hover in IE6.

It is interesting to mention that border-bottom: 1px solid black is better than text-Decoration: underline, the distance between border-bottom and text-decoration is reasonable, but there are some risks such as color problems when using border-bottom.

20. X: Not (selector)
Div: Not (# container) {color: Blue ;}
Deny pseudo-class selector, which is easy to understand. The above will set the font color of the DIV whose non-ID is container to blue.

: Not pseudo IE8 is not supported. ie9 is supported.

21. X: pseudo element
P: first-line {font-weight: bold; font-size: 1.2em ;}
: Pseudo class, used to add a style to the fragment of an element. How can this be understood? For example, if you want to bold the text in the first line of a paragraph, this selector is the best choice.

In addition, you can add a special style to the first word. This application is still very common.

P: First-letter {float: Left; font-size: 2em; font-weight: bold; font-family: cursive; padding-Right: 2px ;}
IE6 is supported! This is amazing .....

Iv. css3 structured pseudo-class selector

 

22. X: Nth-child (N)
Li: Nth-child (3) {color: red ;}
: Nth-child (N), used to match child elements whose index value is N. The index value starts from 1.

X: There are actually three changes in the usage of Nth-child. X: Nth-child () is more powerful in parity matching. For more information, see understanding: Nth-Child pseudo do-class expressions and css3: Nth-child () pseudo class selector.

23. X: Nth-last-child (N)
Li: Nth-last-child (2) {color: red ;}
: Nth-child (n) is used to calculate the index from the first one, while X: Nth-last-child (n) is used to calculate the index from the last one.

24. X: Nth-of-type (n)
Ul: Nth-of-type (3) {border: 1px solid black ;}
The effect of Nth-of-type and Nth-child is surprisingly similar. For more information about Nth-of-type, see alternative for: Nth-of-type () and: Nth-child (), and Nth-of-type (n).

25. X: Nth-last-of-type (n)
Ul: Nth-last-of-type (3) {border: 1px solid black ;}
: Nth-last-child has similar effects.

26. X: First-child
Ul Li: First-child {border-top: none ;}
Matches the first element of the subset. IE7 is supported. This pseudo class is still very useful.

27. X: Last-child
Ul> Li: Last-child {color: green ;}
Opposite to: First-child

Note that IE8 supports First-child, but does not support last-child.

28. X: Only-Child
Div P: Only-Child {color: red ;}
This pseudo class is usually used less. For example, the above code matches only one P under the DIV, that is, if there are multiple P in the DIV, it will not match.

29. X: only-of-type
Li: Only-of-type {font-weight: bold ;}
Similar to: Only-child.

30. X: first-of-type
Ul: first-of-type {font-weight: bold ;}
It is equivalent to Nth-of-type (1). It matches the first element in the Set element.

Respect Original: http://www.36ria.com/3422