Summary of the latest 30 commonly used selectors in CSS3 (suitable for beginners)

 1、

*: Universal element selector

* { margin: 0; padding: 0; }

*The selector selects all elements on the page. The function of the above code is to set the margin and padding of all elements to 0. It is the most basic method to clear the default CSS style

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

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

In this way, all child tag elements with the ID container are selected and the border is set.

2

#ID:ID Selector

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

The ID selector is the most efficient selector in CSS. When using it, you must ensure the uniqueness of the ID.

3

.class: class selector

.error { color: red; }

Class selectors are less efficient than ID selectors. A page can have multiple classes, and classes can be used in different tags.

4

X Y: tag combination selector

li a { text-decoration: none; }

The tag combination selector is also a commonly used selector.

5

X: Tag Selector

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

If you just want to change the style of a certain tag on the page, you can choose to use the tag selector.

6

X:visited and X:link

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

Pseudo-class selector, the most commonly used is the A tag

7

X + Y：毗邻元素选择器

 

ul + p { color: red; }

毗邻元素选择器，匹配的是所有紧随X元素之后的同级元素Y

 

8

 

X > Y：子元素选择器

 

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

匹配#container下的所有子元素。

关于X>Y和X Y的区别请看下面的html实例：

 

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

The selector #container > ul will only match the first UL, which is the child element UL of #container, not the ul in li, but div ul can match the ul in all DIVs.

9

X ~ Y：

ul ~ p { color: red; }

Matches any sibling P element after the X element. That is, all elements of the same level after UL are selected.

10

X[title]: attribute selector

a[title] { color: green; }

Matches tags with a certain attribute. For example, in the example, it matches the a tag with the title attribute.

11

X[href="foo"]

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

also belongs to the attribute selector, matching tags with a certain value in the attribute. For example, the a tag matching href="http://js8.in" in the example is not selected, but the a tags of other links are not selected.

12

X[href*="nettuts"]

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

belongs to the attribute selector and matches all tags containing tuts in href. Regular matching

13

X[href^="http"]

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

Similar to the zodiac sign selection tag above, but matches A tags starting with http, regular matching

14

X[href$=".jpg"]

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

Match tags ending with .jpg in attributes, regular matching, and also a type of attribute selector

15

X[data-*="foo"]

If you want to match all image links, you can do it with the following CSS:

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 tag we need to match.

Image Link

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

16
 
X[foo~="bar"]
 
a[data-info~="external"] { color: red; } a[data-info~="image"] { border: 1px solid black; }
Match X elements with multiple space-separated values ​​in the attribute, one of which is equal to "bar", such as the following example: 
 
17
 
X:checked
 
input[type=radio]:checked { border: 1px solid black; }
This selector is mainly used for checkbox. Select the checkbox as the currently selected label. 
 
18
 
X:after
 
.clearfix:after { content: ""; display: block; clear: both; visibility: hidden; font-size: 0; height: 0; } .clearfix { *display: inline-block; _height: 1%; }
before and after are used to insert content before or after the selected tag. They are generally used to clear floats, but are not available for IE6 and IE7. 
 
19
 
X:hover
 
div:hover { background: #e3e3e3; }
The most commonly used tag is the A tag, but under the IE6 browser, except for the A tag, other tags div:hover do not match. 
 
20
 
X:not(selector)
 
*:not(p) { color: green; }
Select label elements except the selector in (). 
 
21
 
X::pseudoElement
 
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; }
 are used to match the first line and first letter of the element respectively. See examples: 
 
22
 
X:nth-child(n)
 
li:nth-child(3) { color: red; }
 Matches the first few tags in the X element. For example, the above code matches the third li tag. 
 
23
 
X:nth-last-child(n)
 
li:nth-last-child(2) { color: red; }
Contrary to the previous selector, this selector matches the tags in reverse order. The above code means to match the penultimate li tag
 
24
 
X:nth-of-type(n)
 
ul:nth-of-type(3) { border: 1px solid black; }
Similar to :nth-child(), but only matches elements using the same tag
 
25
 
X:nth-last-of-type(n)
 
ul:nth-last-of-type(3) { border: 1px solid black; }
Similar to :nth-last-child(), but only matches elements using the same tag
 
26
 
X:first-child
 
ul li:first-child { border-top: none; }
 Matches the nth child element of its parent element, the first one is numbered 1
 
27
 
X:last-child
 
ul > li:last-child { color: green; }
Matches the nth child element from the bottom of its parent element, the first one is numbered 1
 
28
 
X:only-child
 
div p:only-child { color: red; }
 Matches the only child element under the parent element, which is equivalent to: first-child:last-child or :nth-child(1):nth-last-child(1)
 
29
 
X:only-of-type
 
li:only-of-type { font-weight: bold; }
 Matches the only child element using the same tag under the parent element, which is equivalent to: first-of-type: last-of-type or: nth-of-type(1):nth-last-of-type(1 )
 
30
 
X:first-of-type
 
li:only-of-type { font-weight: bold; }
 Matches the first child element using the same tag under the parent element, which is equivalent to: nth-of-type(1)