The latest CSS3 commonly used 30 selector Summary (suitable for beginners), css3 Selector

The latest CSS3 commonly used 30 selector Summary (suitable for beginners), css3 Selector
1,

 

*: General element Selector

 

* {Margin: 0; padding: 0 ;}

* The selector Selects all elements on the page. The code above sets the margin and padding values of all elements to 0. The most basic method is to clear the default CSS style.

 

* The selector can also be applied to the sub-selector, for example, the following code:

 

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

In this way, all sub-tag elements whose ID is container are selected and border is set.

 

2

 

# ID: ID Selector

 

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

The ID selector is the most efficient selector in CSS. It must be unique when used.

 

3

 

. Class: class selector

 

. Error {color: red ;}

The efficiency of the class selector is lower than that of the ID selector. A page can have multiple classes and the class can be used in different labels.

 

4

 

X y: Tag combination Selector

 

Li a {text-decoration: none ;}

The tag combination selector is also a common selector.

 

5

 

X: Tag Selector

 

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

If you only want to change the style of a tag on the page, you can 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 tag

 

7

 

X + Y: adjacent element Selector

 

Ul + p {color: red ;}

Adjacent to the element selector, matching all the same-level elements Y Following the X Element

 

8

 

X> Y: child element Selector

 

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

Match All child elements under # container.

For the differences between X> Y and x y, see the following html example:

 

<Div id = "container"> <ul> <li> List Item <ul> <li> Child </li> </ul> </li> <li> List Item </li> <li> List Item </li> </ul> </div>

The selector # container> ul matches only the first UL, that is, the # UL iner sub-element ul, instead of the ul in li, however, div ul can match ul in all Divs.

 

9

 

X ~ Y:

 

Ul ~ P {color: red ;}

Matches any P element at the same level 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, a tag with the title attribute is matched in the instance.

 

11

 

X [href = "foo"]

 

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

It also belongs to the attribute selector and matches the tag of a value in the attribute. For example, the tag that matches href = "http://js8.in" in the instance, and the tag for other links is not selected.

 

12

 

X [href * = "nettuts"]

 

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

The property selector matches all tags containing tuts in href. Regular Expression matching

 

13

 

X [href ^ = "http"]

 

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

Similar to the label selected above, but the tag starting with http matches the Regular Expression

 

14

 

X [href $ = ". jpg"]

 

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

The tag ending with .jpg in the matching folder. Regular matching is also a type of attribute selector.

 

15

 

X [data-* = "foo"]

 

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

 

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

However, if we add a data-filetype attribute to tag a, we can use the following CSS to quickly select the tag we need to match.

 

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

16

 

X [foo ~ = "Bar"]

 

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

Match an X element with multiple space-separated values and a value equal to bar. For example:

 

17

 

X: checked

 

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

This selector is mainly used for checkbox. Select checkbox as the selected tag.

 

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 inserted before or after the selected tag, which is generally used to clear floating, but is unavailable for IE6 and IE7.

 

19

 

X: hover

 

Div: hover {background: # e3e3e3 ;}

The most common one is the tag, but in the IE 6 browser, except the tag, the other tag div: hover does not match.

 

20

 

X: not (selector)

 

*: Not (p) {color: green ;}

Select the Tag Element other than the selector in.

 

21

 

X: pseudo element

 

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

Match the first row and the first letter of an element. View instances:

 

22

 

X: nth-child (n)

 

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

Match the number of tags from the header in the X element. For example, the code above matches the third li tag.

 

23

 

X: nth-last-child (n)

 

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

Opposite to the previous selector, this selector matches the first few tags in reverse order. The code above indicates matching the second to last li tags.

 

24

 

X: nth-of-type (n)

 

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

Similar to: nth-child (), but only matches the elements that use the same label.

 

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 the elements that use the same label.

 

26

 

X: first-child

 

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

Matches the nth child element of the parent element. The first child element is 1.

 

27

 

X: last-child

 

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

Matches the nth child element of the parent element. The first child element is 1.

 

28

 

X: only-child

 

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

Matches only one 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 ;}

Match the unique sub-element that uses the same label 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 ;}

Match the first child element that uses the same label under the parent element, equivalent to: nth-of-type (1)