30 CSS selectors you should know

One or five basic selectors

1. * (wildcard characters)
* Wildcard selector, often used for CSS reset (style reset), clean up the default style of the label, but now generally do not advocate the direct use of *, mainly * will match all tags, quite resource-consuming. * The CSS is the lowest in the priority level.

* {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 name, which is the daily common CSS selector, used to match the element with ID XXX, the advantage of ID selector is precision, high priority (priority base is 100, much higher than Class 10), as the choice of JavaScript script hooks, the same disadvantage is also obvious: high priority , reusability is poor, so before using the ID selector, we'd better ask ourselves, really to the point where the ID selector is not used?

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

3.. X (Class)
The. +class name, the standard style selector, differs from the ID selector in that the style selector can select multiple elements. The style selector is the recommended selector and the most used selector for everyday front-end staff.

. error {color:red;}

4. X Y (Descendants)
Li a {text-decoration:none;}
Currently very popular CSS selectors, for the selection of the X element sub-element Y, here is a point to note is that this way the selector will select all the matching sub-elements below, ignoring the hierarchy, so some cases are not suitable for use, such as the above code to remove all the A under Li's underline, but Li also has a UL, I do not want the UL under the Li's a to remove the underline.

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

This descendant selector also has the function of creating a similar namespace. For example, the scope of the above code style is obviously li.

5. X (label)
a {color:red;}
UL {margin-left:0;}
Tag Selector, priority is only higher than *, often used in CSS reset (style reset).

Second, except IE6 outside the browser support CSS Selector

6. X:link x:visited x:hover x:active
a:link {color:red;}
a:visted {color:purple;}
The pseudo-class selector, visted the style that has been visited, hover the style that the mouse has passed, and link is not accessible. Three pseudo-class selectors are often used for links, but not only for links, but unfortunately IE6 only supports the use of these three pseudo-class selectors on links.

Here is a point, due to the relationship between CSS precedence (higher precedence than before), these pseudo-classes of the writing order, typically link, visted, hover, active.

7. X + Y (adjacent)
UL + p {color:red;}
Adjacent selectors, the above code will match the first p after UL, the text color within the paragraph is set to red. (Match only one element)

8. X > Y (sub)
Child Selector, note the difference between x > y and x y, which is the descendant selector, which ignores the hierarchy, and X y is a word selector that matches only the child element y under X.

Theoretically x > y is worth advocating the selector, but IE6 does not support it.

9. X ~ Y
UL ~ p {color:red;}
Adjacent selectors, similar to X+y, differ by x ~ y matching the element collection, such as the above code, matching all UL adjacent P

Ten. X[title]
A[title] {color:green;}
The property selector, as the above code matches the link element with the title attribute.

X[title= ""]
A[title= "Maomao"] {color: #096;}
Property selector, the above code matches not only the link element with the Title property, but also the title property equals Maomao. The Title property is not available within [], and other properties can be used.

X[title*= ""]
A[title*= "Mao"] {color: #096;}
Adding the * number means that it is a fuzzy match, such as the above code, will match the title property of Mao or Maomao or maomao520 with Maomao link properties.

X[title^= ""]
a[title^= "Maomao"]{color: #096;}
Fuzzy matching, in contrast to the role of *, ^ plays the role of exclusion, such as the above code, will match the title property does not have the Maomao link property.

X[href$= ""]
a[href$= ". png"] {color:red;}
In the property selector, a $ symbol is used to match an element that ends with a specific string, such as the code above that matches the value of the href attribute at the end of the. PNG link.

15.x[data-*= ""]
A[data-filetype= "image"] {color:red;}
Data-filetype This property is not much used at present, but some occasions are very useful. For example, I want to match all the data types as links to the images, if you use x[href$= ""] in the following way:

a[href$= ". jpg"], a[href$= ". jpeg"], a[href$= ". png"], a[href$= ". gif"] {color:red;}

While using Data-filetype, as long as:
A[data-filetype= "image"] {color:red;}
Of course, if 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 rare selector, plus the ~ number, there is a particular case, such as you have a data-filetype= "external image" property, this time I want to separate for external and image style control.

A[data-info~= "external"] {color:red;}
a[data-info~= "image"] {border:1px solid black;}
The code above matches a data-filetype= "external", data-filetype= "image", 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, checkboxes, checkboxes, and multi-marquee boxes.

At present, this pseudo-class selector, IE9 is not supported, non-IE browser basically support.

Third, CSS selectors supported by browsers except IE8

18.x:after
. clearfix:after {content: "";d isplay:block;clear:both; visibility:hidden;font-size:0; height:0;}

. clearfix {*display:inline-block;_height:1%;0}
I think the above code, a lot of friends are very familiar with, is to clean up floating when the common hack method. : The after pseudo-class is used in conjunction with content to append to the element class. : The After pseudo class also has a magical effect: used to generate shadows.

19.x:hover
div:hover {background: #e3e3e3;}
Hover has been introduced in the previous, IE6 only support a hover.

A very interesting thing to mention here is the use of border-bottom:1px solid black; Better than text-decoration:underline; from the actual effect, the use of border-bottom distance than text-decoration reasonable, but the use of border-bottom there are some risks, such as color problems.

20.x:not (selector)
Div:not (#container) {color:blue;}
Negation of pseudo-class selectors, which is quite understandable, will set the font color of the div with non-ID container to blue.

: Not pseudo-class IE8 not supported, IE9 has been supported.

21.X::p seudoelement
p::first-line {font-weight:bold; font-size:1.2em;}
:: Pseudo-class, which is used to add styles to fragments of an element, how do you understand that? For example, if you want to make the text in the first line of a paragraph bold, then this selector is the perfect choice.

In addition, you can also add a special style to the first word, this application is very common

p::first-letter {float:left;font-size:2em;font-weight:bold;font-family:cursive; padding-right:2px;}
IE6 Incredibly support! This is enough to surprise ...

Iv. CSS3 Structural pseudo-class selector

22.x:nth-child (N)
Li:nth-child (3) {color:red;}
: Nth-child (n), used to match a child element with an index value of N. The index value starts at 1.

There are actually three variations of x:nth-child () usage. X:nth-child () More powerful use in for odd pages even match. Interested please see "understanding:nth-child pseudo-class Expressions", "Css3:nth-child () Pseudo-class selector"

23.x:nth-last-child (N)
Li:nth-last-child (2) {color:red;}
: Nth-child (n), the index is counted from the first, and X:nth-last-child (n) is the index from the last start.

24.x:nth-of-type (N)
Ul:nth-of-type (3) {border:1px solid black;}
Nth-of-type and Nth-child The effect is amazing similar, want to learn more nth-of-type see alternative For:nth-of-type () And:nth-child (), ": Nth-of-type (N) ".

25.x:nth-last-of-type (N)
Ul:nth-last-of-type (3) {border:1px solid black;}
: Nth-last-child effect is similar.

26.x:first-child
UL li:first-child {border-top:none;}
Matches the first element of a subset. IE7 can be supported, this pseudo-class is still very useful.

27.x:last-child
ul > Li:last-child {color:green;}
Contrary to: First-child effect

Note IE8 support: First-child, but not supported: Last-child.

28.x:only-child
Div p:only-child {color:red;}
This pseudo-class is generally used less, such as the above code matches the DIV has and only one P, that is, if there are multiple p in the Div, 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;}
Equivalent to: Nth-of-type (1), which matches the first element in the collection element.

30 CSS selectors you should know