Most commonly used CSS selector parsing

You may have mastered the basic CSS selectors for the ID, class, background selector. But this is far from the whole of CSS. The following is a systematic analysis of the 30 most commonly used selectors in CSS, including our most headache browser compatibility issues. Mastering them, you can really appreciate the great flexibility of CSS.

1. *

* {margin:0; padding:0;}

The star selector will work on every element on the page. Web designers often use it to set the margin and padding of all elements in a page to 0. * Selectors can also be used in sub-selectors.

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

The code above applies to all child elements with an ID of container element. Unless necessary, I don't recommend using a star-shaped selector in a page because his scope is too large to consume the browser resources. Compatible browsers: ie6+, Firefox, Chrome, Safari, Opera

2. #X

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

The pound scope has an element of the corresponding ID. ID is one of our most commonly used CSS selectors. The advantage of the ID selector is precision, high priority (the priority base is 100, much higher than the class 10), as the best choice for JavaScript script hooks, the same drawback is obviously too high priority, reusability is poor, so before using the ID selector, we'd better ask ourselves, Really to the point where the ID selector is not used? Compatible browsers: ie6+, Firefox, Chrome, Safari, Opera

3.. X

. error {color:red;}

This is a class (class) selector. The difference between the class selector and the ID selector is that the class selector can be used for a set of elements that are expected to be styled. Compatible browsers: ie6+, Firefox, Chrome, Safari, Opera

4. X Y

Li a {text-decoration:none;}

This is also one of our most commonly used selectors-descendant selectors. To select the element y of the x element, the point to note is that this way the selector will select all the matching sub-elements below, ignoring the hierarchy, so some cases are not suitable for use, such as the above code to remove all the A under Li's underline, but Li also has a UL, I do not want to ul Li's a minus underline. When using this descendant selector, consider whether you want a style to work for all descendant elements. This descendant selector also has the effect of creating a similar namespace. For example, the scope of the above code style is obviously li. Compatible browsers: ie6+, Firefox, Chrome, Safari, Opera

5. X

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

Tag Selector. Use the Tag Selector to act on all corresponding labels within the scope range. The priority level is only higher than *. Compatible browsers: ie6+, Firefox, Chrome, Safari, Opera

6. X:visited and X:link

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

Use: Link pseudo-class acts on a linked label that has not been clicked. : The hover pseudo-class acts on a clicked link. Compatible browsers: ie7+, Firefox, Chrome, Safari, Opera

7. X+y

UL + p {color:red;}

Adjacent selectors, the above code will match the first p after UL, the text color within the paragraph is set to red. (matches only the first element) compatible browsers: ie7+, Firefox, Chrome, Safari, Opera

8. X>y

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

  
   
   
List Item 
    
 
     
 
    
  
   
   

  
   
   

  
   
   

 
  
  

The child selector. Unlike the descendant selector X y, the sub-selector works only on the direct child y under X. In the above CSS and HTML examples, Div#container>ul only works on the most recent level of UL in container. Theoretically x > y is worth advocating the selector, but IE6 does not support it. Compatible browsers: ie7+, Firefox, Chrome, Safari, Opera

9. X ~ Y

UL ~ p {color:red;}

The adjacent selector, unlike the x+y mentioned earlier, x~y matches all y elements of the same level as X, and x+y only matches the first one. Compatible browsers: ie7+, Firefox, Chrome, Safari, Opera

Ten. X[title]

A[title] {color:green;}

The property selector. For example, the above code matches a LINK element with the title attribute.

Compatible browsers: ie7+, Firefox, Chrome, Safari, Opera

X[title= "Foo"]

A[href= "http://www.xuanfengge.com"] {color: #1f6053;}

The property selector. The above code matches all links that have the href attribute and href is http://www.xuanfengge.com.

This is a good function, but it is somewhat limited. What if we want to match all the links in the href containing css9.net? Look at the next selector. Compatible browsers: ie7+, Firefox, Chrome, Safari, Opera

X[title*= "Css9.net"]

A[href*= "xuanfengge.com"] {color: #1f6053;}

The property selector. As we want, the above code matches all the links in the href that contain "xuanfengge.com".

Compatible browsers: ie7+, Firefox, Chrome, Safari, Opera

x[href^= "http"]

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

It looks more troublesome. Another solution is to add a specific attribute to all the image links, such as ' Data-file '

HTML code

The image link CSS code is as follows: a[data-filetype= "image"] {color:red;}

This way all links to the picture have a red color for the link font.

Compatible browsers: ie7+, Firefox, Chrome, Safari, Opera

X[foo~= "Bar"]

The property selector. The wavy line symbol in the property selector allows us to match one of the multiple values in the property value separated by a space. Look at the following example:

HTML code

CSS Code

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

In the example above, the font color of the match Data-info attribute containing the "external" link is red. Matches the link in the Data-info property that contains "image" to set the black border.

Compatible browsers: ie7+, Firefox, Chrome, Safari, Opera

X:checked.

The checked pseudo-class is used to match interface elements in the selected state, such as radio, checkbox.

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

The above code matches all selected radio, setting the black border of 1px.

Compatible browsers: ie9+, Firefox, Chrome, Safari, Opera

X:after and X:before.

The two pseudo-classes are combined with the content to append to the front or back of the element, to see a simple example:

H1:after {Content:url (/i/logo.gif)}

The above code implements a picture that appears after the H1 title.

We also often use it to achieve clear float, the following wording:

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

X:hover.

div:hover {background: #e3e3e3;}

: hover pseudo-Class sets the style of the element when the mouse is over. The above code sets the background color for the div to be out of date.

It is important to note that in IE 6,: hover can only be used for link elements.

Sharing an experience here, the use of border-bottom will be more beautiful than text-decoration when setting a link across a sliding line. The code is as follows:

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

Compatible browsers: ie6+, Firefox, Chrome, Safari, Opera

X:not (selector)

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

The following code sets the style of the first line in the paragraph:

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

Compatible browsers: ie6+, Firefox, Chrome, Safari, Opera (IE6 support, some surprises.) )

X:nth-child (N)

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

This pseudo-class is used to set the style of the nth element (starting with 1) in a sequence element, such as Li, tr. In the example above, set the third list element Li's font color to be red.

To see a more flexible usage, set the style of an even number of elements in the following example, which can be used to achieve interlaced color change:

Tr:nth-child (2n) {Background-color:gray;}

Compatible browsers: ie9+, Firefox, Chrome, Safari

X:nth-last-child (N)

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

Similar to the X:nth-child (n) function, the difference is that it starts with the last element of a sequence. In the example above, the font color of the second-to-last list element is set.

Compatible browsers: ie9+, Firefox, Chrome, Safari, Opera

X:nth-of-type (N)

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

Similar to the X:nth-child (n) function, the difference is that it does not match a sequence element, but rather an element type. For example, the above Code Settings page appears in the third unordered list of UL's borders.

Compatible browsers: ie9+, Firefox, Chrome, Safari

X:nth-last-of-type (N)

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

Similar to the X:nth-of-type (n) feature, the difference is that it starts with the last occurrence of the element. In the example above, set the border of the third-to-last unordered list

Compatible browsers: ie9+, Firefox, Chrome, Safari, Opera

X:first-child.

: The First-child pseudo-class is used to match the first element of a sequence. We often use it to implement the top (bottom) border of the first or last element of a sequence, such as:

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

Compatible browsers: ie7+, Firefox, Chrome, Safari, Opera

X:last-child.

ul > Li:last-child {border-bottom:none;}

Similar to: First-child, it matches the last element in the sequence.

Compatible browsers: ie9+, Firefox, Chrome, Safari, Opera

X:only-child.

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

This pseudo-class uses less. In the example above, there is only one P below the Div, that is, if there is more than one P in the Div, it will not match.

The paragraph p in the first div in the code above will be matched, and p in the second Div will not.

Compatible browsers: ie9+, Firefox, Chrome, Safari, Opera

X:only-of-type.

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

This pseudo-class matches that it has only one child element under its parent container, and it does not have a neighbor element. For example, the above code matches a list element that has only one list item.

Compatible browsers: ie9+, Firefox, Chrome, Safari, Opera

X:first-of-type.

: The First-of-type pseudo-class has the same effect as: Nth-of-type (1), matching the first element that appears. Let's look at an example:

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

Scenario Two:

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

Programme III:

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

Compatible browsers: ie9+, Firefox, Chrome, Safari, Opera.

Summarize:

If you are using an older version of the browser, such as IE 6, be sure to be aware of its compatibility when using the CSS selector above. However, this should not be a reason to prevent us from learning to use it. At design time, you can refer to the browser Compatibility list, or you can use scripting to get older browsers to support them as well.

Another point is that when we use the JavaScript class library selectors, such as jquery, we want to use these native CSS3 selectors as much as possible, because the class library's selector engine resolves them through the browser's built-in, which gets faster

