Do you know? Application of 31 CSS selectors

Selector is a very important concept in CSS. All the markup in HTML language is controlled by different CSS selectors. You only need to use the selector to control different HTML tags and assign various style declarations to achieve various effects.

 

1 .*

* { margin: 0; padding: 0; }

The asterisks selector is used to select all elements on the page. It can be used to quickly clear the margin and padding of all elements. However, it is recommended that you use the asterisks selector only during testing instead of in CSS files, otherwise, the burden on the browser will be greatly increased. In addition, the asterisk selector can also set a style for all the child elements of the parent layer and repeat it once. Try to use this method as little as possible:

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

Compatible with IE6 +

2. # X

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

Id selector, one of the most common selector usage, cannot be reused.

Compatible with IE6 +

3. X

.error { color: red; }

The class selector is also one of the most common selector usage. Unlike the id selector, the class selector can select multiple elements at the same time, and the id selector can only set a style for a unique element.

Compatible with IE6 +

4. X Y

li a { text-decoration: none; }

The descendant selector Selects all Y elements in element X. For example, the code above Selects all links in the li label.

Compatible with IE6 +

5.x

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

Type selector is used to select HTML tags ).

Compatible with IE6 +

6. X: visited and X: link

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

: The link pseudo-class selector is used to select all the links that have not been clicked, and visited is used to select all the links that have been accessed.

Compatible with IE6 +

7. X + Y

ul + p { color: red; }

The adjacent selector selects the first element next to the X element. For example, the code above selects the first element after the ul element, that is, the p element.

Compatibility IE6 +

8. X> Y

div#container > ul { border: 1px solid black; }

In the first row, the Child selector x y Selects all Y elements in parent layer X, and the Child selector X> Y selects only Y elements that appear directly in parent layer X. For example, in the following HTML structure, # container> ul selects ul elements directly appearing in div # container, excluding ul elements nested in li:

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

Compatible with IE6 +

9. X ~ Y

ul ~ p { color: red; }

It is also a near selector. In the first 7th X + Y, select the first element next to X, and X ~ Y Selects all the same level elements after the X element. The above code Selects all the p elements of the same level after the ul element, rather than selecting the first p element as ul + p.

Compatible with IE7 +

10. X [title]

a[title] { color: green; }

Attributes selector further narrow the selection range based on the attributes used by the element. The code above Selects all links that use the title attribute, or a [title = "title content"] {color: green} further narrow down the selection range.

Compatible with IE7 +

11. X [href = "foo"]

a[href="http://net.tutsplus.com"] { color: #1f6053; /* nettuts green */ }

The code above Selects all links that jump to the http://net.tutsplus.com, which are displayed in green and other links are not affected.

However, in this method, there is no difference between one character. The following describes more flexible usage.

Compatible with IE7 +

12. X [href * = "nettuts"]

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

* Indicates that the selection requirement is met as long as the content of the attribute value contains double quotation marks. This code will jump to links such as nettuts.com, net.tutsplus.com, or tutsplus.com.

Compatible with IE7 +

13. X [href ^ = "http"]

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

^ Indicates that the selection requirement is met as long as the attribute value starts with the content in double quotation marks. This Code is also used to set the style for all external interfaces on the page.

Compatible with IE7 +

14. X [href $ = ". jpg"]

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

$ Indicates that the selection requirement is met as long as the attribute value ends with the content in double quotation marks. This Code Selects all links to jump to the jpg image.

Compatible with IE7 +

15. X [data-* = "foo"]

The above 14th articles mentioned how to select all links to jump to jpg images. to select all links to jump to images, you can use the following method:

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

Alternatively, add data-Attributes to the image Link (Note: HTML5 Custom Data Attributes)

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

Then, use the attribute selector to select:

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

Compatible with IE7 +

16. X [foo ~ = "Bar"]

a[data-info~="external"] { color: red; } a[data-info~="image"] { border: 1px solid black; }

If a series of attribute values are separated by spaces ,~ You can select one of the attribute values, for example:

<a href="path/to/image.jpg" data-info="external image"> Click Me, Fool </a>

Help ~ Select an element that contains the value of external or image:

/* Target data-info attr that contains the value "external" */ a[data-info~="external"] { color: red; } /* And which contain the value "image" */ a[data-info~="image"] { border: 1px solid black; }

Compatible with IE7 +

17. X: checked

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

: The checked pseudo-class selector is used to select all elements marked as checked, such as single-digit (radio button) or check box (checkbox ).

Compatible with IE9 +

18. X: after

: Before AND: after are two exciting pseudo-class selectors. Some new usages have been invented almost every day. Here we will briefly introduce how to use it to clear the floating:

.clearfix:after { content: ""; display: block; clear: both; visibility: hidden; font-size: 0; height: 0; } .clearfix { *display: inline-block; _height: 1%; }

In this way, you can add an area after the element and hide it to make up for the overflow: hidden; defect.

According to the CSS3 selector standard, in theory, the pseudo-class selector should use double colons, but in fact the browser also supports the form of single colons, so you can continue to use single colons.

Compatible with IE8 +

19. X: hover

div:hover { background: #e3e3e3; }

The most common pseudo-class selector is not explained much, but IE6 does not support: hover acts on other elements except a link.

a:hover { border-bottom: 1px solid black; }

Note: border-bottom: 1px solid black; is better than text-decoration: underline.

Compatible with IE6 + (in IE6: hover can only act on links)

20. X: not (selector)

div:not(#container) { color: blue; }

: Not pseudo-class selector sometimes plays a very important role. If you want to select all div elements except # contaienr, you can use the above Code.

Compatible with IE9 +

21. X: pseudo element

p::first-line { font-weight: bold; font-size: 1.2em; }

You can use a pseudo element (with double Colon: :) to set a style for a part of the element, such as the first line or the first letter. It must be noted that this only applies to block level elements.

Tip: Use double colons for pseudo elements ::

Select the first letter of the paragraph

p::first-letter { float: left; font-size: 2em; font-weight: bold; font-family: cursive; padding-right: 2px; }

This code Selects all p elements on the page, and then selects the first letter.

Select the first line of the paragraph

p::first-line { font-weight: bold; font-size: 1.2em; }

Similar to the preceding example, use: first-line to select the first line of the page.

To be compatible with the pseudo elements (such as first-line,: first-letter,: before, And: after) in CSS1 and CSS2, the browser accepts the single colon and double colon formats, however, double colons must be used for the newly introduced pseudo elements in CSS3.

Compatible with IE6 +

22. X: nth-child (n)

li:nth-child(3) { color: red; }

: Nth-child (n) is used to select an element in the stack and only accept integers as parameters (the parameter starts from 1). If you want to select the second li element, write li: nth-child (2) in this way ).

You can also set variable parameters. For example, li: nth-child (4n) will select 4th, 8, 12... Elements (4 * n, n = 1, n ++ ).

Compatible with IE9 +

23. X: nth-last-child (n)

li:nth-last-child(2) { color: red; }

In addition to the positive sequence (from top to bottom), you can also use nth-last-child (n) reverse sequence (from bottom to top) to select the elements. Other usage is exactly the same as that of article 22nd.

Compatible with IE9 +

24. X: nth-of-type (n)

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

: Nth-of-type (n) is used not to select child elements, but to select similar elements ). Imagine that an HTML file contains five ul elements. To select the third element, you only need to use the above Code, instead of adding an id for this ul.

For details about the differences between nth-child and nth-of-type, refer to the explanation on the CSS-Tricks website. To put it simply, if the parent layer contains only one element (for example, all elements are p), the two methods are equivalent. If the parent layer contains multiple elements (for example, other elements at the same level as the p element ), use nth-of-type when selecting the nth p element.

Compatible with IE9 +

25. X: nth-last-of-type (n)

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

Similar to the 24th entries, similar elements are selected in reverse order.

Compatible with IE9 +

26. X: first-child

ul li:first-child { border-top: none; }

Select the first child element in the parent layer.

Compatible with IE7 +

27. X: last-child

ul > li:last-child { color: green; }

The difference is that last-child selects the last child element in the parent element.

: First-child and: last-child are usually used to clear borders (border ), for example, each <li> </li> in <ul> </ul> uses the border between border-top and border-bottom. The result is, the top of the first element and the bottom of the last element will be a single border. In this case, use first-child and last-child to clear the upper and lower borders, instead of adding id = "first" to the first element or adding id = "last" to the last element ".

Compatible with IE9 +

28. X: only-child

div p:only-child { color: red; }

This pseudo-class selector is not commonly used. It can select a parent layer containing a unique child element. For example, the code above selects the first div element below, instead of the p element in the second div.

<div><p> My paragraph here. </p></div> <div> <p> Two paragraphs total. </p> <p> Two paragraphs total. </p> </div>

Compatible with IE9 +

29. X: only-of-type

li:only-of-type { font-weight: bold; }

This selector selects an element, and this element does not have other similar elements in its parent layer (not necessarily unique ). For example, how do I select all ul elements that only contain one li element? If ul li is used, all li elements should be selected, and only-of-type should be used.

Compatible with IE9 +

30. X: first-of-type

The first-of-type pseudo-class can select the first similar element of an element.

To better understand its usage, I would like to think about how to select List Item 2 in the following HTML structure?

<div> <p> My paragraph here. </p> <ul> <li> List Item 1 </li> <li> List Item 2 </li> </ul> <ul> <li> List Item 3 </li> <li> List Item 4 </li> </ul> </div>

Method 1

ul:first-of-type > li:nth-child(2) { font-weight: bold; }

In this Code, select the first ul element, then select all the direct sub-elements, that is, li, and then select the second sub-element.

Method 2

p + ul li:last-child { font-weight: bold; }

Find the first ul element after the p element, and then select the last child element.

Method 3

ul:first-of-type li:nth-last-child(1) { font-weight: bold; }

Locate the first ul element and select the first child element from the top down.

Compatible with IE9 +

31. Pseudo-class selector stacked

Some pseudo-class selectors or pseudo elements can be stacked, for example:

#post p:nth-of-type(2):first-letter { float: left; margin: 0 5px 0 1em; width: 1em; height: 1em; font-size: 2em; }

Link: http://www.cnblogs.com/oooweb/p/css-selectors-using.html