30 CSS3 selectors must be mastered at the front end

Maybe You've learned three simple and common selectors for css: #ID,. class, tag selector, but is that enough? With the advent of CSS3 , as the front-end developers need to master the following 30 basic selectors, so that in peacetime development in the heart with the HANDS.

This article will synthesize the 30 CSS3 selectors commonly used in front-end development, and with the support of the browser, we hope to help you.

1. *: Universal Element Selector

* {margin:0; padding:0;}

* Selector is the selection of all elements on the page, the above code is to set all the elements of margin and padding to 0, the most basic way to clear the default CSS style

* Selectors can also be applied to sub-selectors, such as the following code:

#container * {border:1px Solid black;}

All child tag elements with ID container are selected, and border is Set.

View Demo

Compatibility

1. ie6+
2. Firefox
3. Chrome
4. Safari
5. Opera

#ID: ID Selector

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

The ID selector is the most efficient selector in CSS and is used to ensure that the ID is Unique.

View Demo

Compatibility

1. ie6+
2. Firefox
3. Chrome
4. Safari
5. Opera

. Class: class Selector

. Error {color:red;}

Class selector is less efficient than the ID selector, a page can have multiple classes, and class can be used in different tags.

View Demo

Compatibility

1. ie6+
2. Firefox
3. Chrome
4. Safari
5. Opera

X Y: Tag Combination Selector

Li a {text-decoration:none;}

The tag combination selector is also a popular Selector.

View Demo

Compatibility

1. ie6+
2. Firefox
3. Chrome
4. Safari
5. Opera

X: Tag Selector

A {color:red;} ul {margin-left:0;}

If you just want a label style change on the page, you can choose to use the tag Selector.

View Demo

Compatibility

1. ie6+
2. Firefox
3. Chrome
4. Safari
5. Opera

X:visited and X:link

A:link {color:red;} a:visted {color:purple;}

Pseudo-class selector, most commonly used as a label

View Demo

Compatibility

1. ie7+
2. Firefox
3. Chrome
4. Safari
5. Opera

X + Y: Adjacent element selector

UL + P {color:red;}

Adjacent element selectors, matching all sibling elements immediately following the X element y

View Demo

Compatibility

1. ie7+
2. Firefox
3. Chrome
4. Safari
5. Opera

X > Y: child element Selector

Div#container > UL {border:1px solid black;}

Matches all child elements under the #container.
See X>Y X Y The following HTML example for the difference between and:

<div id= "container" > <ul> <li> List Item <ul> <li> child </li> </ul> </li> ; <li> list item </li> <li> list item </li> <li> list item </li> </ul> </DIV> ;

The selector #container > ul will only match to the first ul, which is #container's sub-element ul, not the UL inside li, but div ul it can be matched to all of the Div's Ul.

View Demo

Compatibility

1. ie7+
2. Firefox
3. Chrome
4. Safari
5. Opera

X ~ Y:

UL ~ P {color:red;}

Matches any of the sibling P elements after the x Element. That is, all elements of the same class that were selected after Ul.

View Demo

Compatibility

1. ie7+
2. Firefox
3. Chrome
4. Safari
5. Opera

X[title]: Property Selector

a[title] {color:green;}

Matches a label with a property, such as an A tag that matches a title attribute in an Instance.

View Demo

Compatibility

1. ie7+
2. Firefox
3. Chrome
4. Safari
5. Opera

x[href= "foo"]

a[href= "http://js8.in" {color: #1f6053;/* nettuts Green */}

Also belongs to the property selector, which matches the label of a value in the Attribute. For example, the A tag that matches in the instance href="http://js8.in" , and the a tag of the other links are not Selected.

View Demo

Compatibility

1. ie7+
2. Firefox
3. Chrome
4. Safari
5. Opera

x[href*= "nettuts"]

a[href*= "tuts" {color: #1f6053;/* nettuts Green */}

belongs to the attribute selector, matching all the tags in the href that contain tuts. Regular match

View Demo

Compatibility

1. ie7+
2. Firefox
3. Chrome
4. Safari
5. Opera

x[href^= "http"]

a[href^= "http"] {background:url (path/to/external/icon.png) no-repeat; padding-left:10px;}

Similar to the above zodiac selection tag, but matched with a tag that starts with http, regular matches

View Demo

Compatibility

1. ie7+
2. Firefox
3. Chrome
4. Safari
5. Opera

x[href$= ". jpg"]

a[href$= ". jpg"] {color:red;}

A label with A. jpg ending in a matching attribute, a regular match, and a property selector

View Demo

Compatibility

1. ie7+
2. Firefox
3. Chrome
4. Safari
5. Opera

x[data-*= "foo"]

If you want to match all the image links, you can use the following CSS to Achieve:

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

But if we add a Data-filetype attribute to the a tag, we can use the following CSS to quickly select the tags we need to Match.

<a href= "path/to/image.jpg" data-filetype= "image" > Image Link </a> 
View Demo
Compatibility
 
 

  
  
 
   
ie7+
 
   
Firefox
 
   
Chrome
 
   
Safari
 
   
Opera
 
  
 
 
x[foo~= "bar"]
a[data-info~= "external"] {color:red;} a[data-info~= "image"] {border:1px Solid black;}
An X element with multiple space-delimited values in the matching attribute, one with a value equal to "bar", such as the following example:
View Demo
Compatibility
 
 

  
  
 
   
ie7+
 
   
Firefox
 
   
Chrome
 
   
Safari
 
   
Opera
 
  
 
 
X:checked
input[type=radio]:checked {border:1px Solid black;}
This selector is used primarily for checkboxes and selects the checkbox as the currently selected Label.
View Demo
Compatibility
 
 

  
  
 
   
IE9
 
   
Firefox
 
   
Chrome
 
   
Safari
 
   
Opera
 
  
 
 
X:after
. Clearfix:after {content: ""; display:block; clear:both; visibility:hidden; font-size:0; height:0; }. Clearfix {*display:inline-block; _height:1%;}
beforeThe after content is inserted before or after the selected label and is generally used to clear the float, but is not available for IE6, IE7.
Compatibility
 
 

  
  
 
   
ie8+
 
   
Firefox
 
   
Chrome
 
   
Safari
 
   
Opera
 
  
 
 
X:hover
Div:hover {background: #e3e3e3;}
The most common is a tag, but in the IE6 browser, except for the A tag, other tags div:hover do not Match.
View Demo
Compatibility
 
 

  
  
 
   
ie6+ (IE6 can only be used in a Tag)
 
   
Firefox
 
   
Chrome
 
   
Safari
 
   
Opera
 
  
 
 
X:not (selector)
*:not (p) {color:green;}
Selects a LABEL element other than the selector in ().
View Demo
Compatibility
 
 

  
  
 
   
IE9
 
   
Firefox
 
   
Chrome
 
   
Safari
 
   
Opera
 
  
 
 
X::p seudoelement
P::first-line {font-weight:bold; font-size:1.2em;} p::first-letter {float:left; font-size:2em; font-weight:bold; F ont-family:cursive; padding-right:2px; }
Used to match the first and first letters of an element, respectively. See Example:
View Demo
Compatibility
 
 

  
  
 
   
ie6+
 
   
Firefox
 
   
Chrome
 
   
Safari
 
   
Opera
 
  
 
 
X:nth-child (n)
Li:nth-child (3) {color:red;}
Match the X element in the first number of tags, for example the above code is matched to the third Li Tag.
View Demo
Compatibility
 
 

  
  
 
   
IE9
 
   
Firefox 3.5+
 
   
Chrome
 
   
Safari
 
   
Opera
 
  
 
 
X:nth-last-child (n)
Li:nth-last-child (2) {color:red;}
In contrast to the previous selector, this selector is reversed to match the first few tags, the above code means matching the second-to-last li tag
View Demo
Compatibility
 
 

  
  
 
   
IE9
 
   
Firefox 3.5+
 
   
Chrome
 
   
Safari
 
   
Opera
 
  
 
 
X:nth-of-type (n)
Ul:nth-of-type (3) {border:1px Solid black;}
:nth-child()similar to action, but only matches elements that use the same label
View Demo
Compatibility
 
 

  
  
 
   
IE9
 
   
Firefox 3.5+
 
   
Chrome
 
   
Safari
 
   
Opera
 
  
 
 
X:nth-last-of-type (n)
Ul:nth-last-of-type (3) {border:1px Solid black;}
:nth-last-child() similar to action, but only matches elements that use the same label
View Demo
Compatibility
 
 

  
  
 
   
IE9
 
   
Firefox 3.5+
 
   
Chrome
 
   
Safari
 
   
Opera
 
  
 
 
X:first-child
UL Li:first-child {border-top:none;}
Matches the nth child element of its parent element, the first number is 1
View Demo
Compatibility
 
 

  
  
 
   
ie7+
 
   
Firefox
 
   
Chrome
 
   
Safari
 
   
Opera
 
  
 
 
X:last-child
UL > Li:last-child {color:green;}
Matches the reciprocal nth child element of its parent element, the first number is 1
View Demo
Compatibility
 
 

  
  
 
   
IE9
 
   
Firefox
 
   
Chrome
 
   
Safari
 
   
Opera
 
  
 
 
X:only-child
Div P:only-child {color:red;}
Matches only one child element under a parent element, equivalent to: first-child:last-child or: nth-child (1): nth-last-child (1)
View Demo
Compatibility
 
 

  
  
 
   
IE9
 
   
Firefox
 
   
Chrome
 
   
Safari
 
   
Opera
 
  
 
 
X:only-of-type
Li:only-of-type {font-weight:bold;}
Match the only child element that uses the same label under the parent element, equivalent to: first-of-type:last-of-type or: nth-of-type (1): nth-last-of-type (1)
View Demo
Compatibility
 
 

  
  
 
   
IE9
 
   
Firefox 3.5+
 
   
Chrome
 
   
Safari
 
   
Opera
 
  
 
 
X:first-of-type
Li:only-of-type {font-weight:bold;}
Match the first child element of the same label under the parent element, equivalent to: Nth-of-type (1)
View Demo
Compatibility
 
 

  
  
 
   
IE9
 
   
Firefox 3.5+
 
   
Chrome
 
   
Safari
 
   
Opera
 
  
 
 
Original Source: http://net.tutsplus.com/tutorials/html-css-techniques/the-30-css-selectors-you-must-memorize/
PS: also not be translated, just according to the author and then integrate into my own understanding, hope everyone treatise.
30 CSS3 selectors must be mastered at the front end