30 CSS selectors to be mastered by 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.

*: 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 clear default CSS style

The method * Selector can also be applied to the child selector, such as the following code:

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

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

Compatibility: ie6+ Firefox Chrome Safari Opera

2. ??

#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.

Compatibility: ie6+ Firefox Chrome Safari 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.

? Compatibility: ie6+ Firefox Chrome Safari Opera

?

X Y: Tag combination selector

Li a {text-decoration:none;}

The tag combination selector is also a popular selector.

Compatibility: ie6+ Firefox Chrome Safari 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.

Compatibility: ie6+ Firefox Chrome Safari Opera

• ?

x:visited and X:link

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

Pseudo-class selector, most commonly used as a label

Compatibility: ie7+ Firefox Chrome Safari Opera

• ?

X + Y: adjacent element selector

? UL + p {color:red;}

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

Compatibility: ie7+ Firefox Chrome Safari Opera

• ?

X > Y: child element Selector

?

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

Matches all child elements under the #container. AboutX>Y

X Yplease see the following HTML example for the difference:

• List Item
  • Child
• List Item
• List Item
• List Item

Selector Selector#container > ul

will only match to the first UL, that is #container's sub-element ul, not li inside the UL, but div ul then can match to all div inside of ul.

Compatibility: ie7+ Firefox Chrome Safari 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.

Compatibility: ie7+ Firefox Chrome Safari 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.

Compatibility: ie7+ Firefox Chrome Safari Opera

• ?

x[href= "foo"]

A[href= "http://js8.in"] {color: #1f6053; }

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.

Compatibility: ie7+ Firefox Chrome Safari Opera

• ?

x[href*= "Nettuts"] ?

A[href*= "Tuts"] {color: #1f6053; }

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

Compatibility: ie7+ Firefox Chrome Safari 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

Compatibility: ie7+ Firefox Chrome Safari 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

Compatibility: ie7+ Firefox Chrome Safari 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.

Image Link   

A[data-filetype= "image"] {color:red;}

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:

Compatibility:  ie7+  Firefox  Chrome  Safari  Opera

• ?

x:checked

input[type=radio]:checked {border:1px solid black;}

This selector is mainly used for checkbox

, select the checkbox for the currently selected label.
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 in addition to the a tag, other tagsdiv:hover
does not match.

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 ().

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;
? font-family:cursive; padding-right:2px; }
Used to match the first and first letters of an element, respectively. See Example:

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.

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

Compatibility: IE9  Firefox 3.5+  Chrome  Safari  Opera

• x:nth-of-type (n)?
• ?

Ul:nth-of-type (3) {border:1px solid black;}

And:nth-child()
Works similarly, but only matches elements that use the same label

Compatibility: IE9  Firefox 3.5+ Chrome  Safari  Opera

• ?

x:nth-last-of-type (n)

? Ul:nth-last-of-type (3) {border:1px solid black;}

And:nth-last-child() 
Works similarly, but only matches elements that use the same label

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

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

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)

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)

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)
Compatibility: IE9  Firefox 3.5+  Chrome  Safari  Opera

Source: Http://net.tutsplus.com/tutorials/html-css-techniques/the-30-css-selectors-you-must-memorize/PS: Not a translation, Just according to the author of the collation and then into my own understanding, I hope everyone treatise.
Http://www.360doc.com/content/13/0812/09/13476817_306545820.shtml

30 CSS selectors to be mastered by the front end