Resolution of the 30 most common CSS Selector

You may have mastered the basic CSS selectors such as ID, class, and background selector. But this is far from the whole of CSS. The following describes the 30 most commonly used selectors in CSS parsing for your system, including our biggest browser compatibility issue. Only by mastering them can we truly appreciate the great flexibility of CSS.

1 .*

* {    margin: 0;    padding: 0;   }

The star selector takes effect on each element on the page. Web Designers often use it to set the margin and padding of all elements on the page to 0. * The selector can also be used in the child selector.

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

The code above applies to all sub-elements whose ID is the container element. Unless necessary, I do not recommend using the star selector on the page because it has a large scope and consumes browser resources. Compatible browsers: IE6 +, Firefox, chrome, Safari, and opera

2. # x

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

The well number scope has the corresponding ID element. ID is one of our most commonly used CSS selectors. The advantage of the ID selector is precision and high priority (the priority base is 100, much higher than the 10 of the class). As the best choice for Javascript script hooks, the disadvantage is that the priority is too high, poor reusability, so before using the ID selector, we 'd better ask ourselves, is it true that we are not using the ID selector? Compatible browsers: IE6 +, Firefox, chrome, Safari, and opera

3. x

.error {     color: red;   } 

This is a class selector. The difference between the class selector and the ID selector is that the class selector can act on a group of elements in the expected style. Compatible browsers: IE6 +, Firefox, chrome, Safari, and opera

4. x y

li a {     text-decoration: none;   } 

This is also our most common selector-descendant selector. It is used to select sub-element y under Element x. Note that this method selects all matched sub-elements and ignores the hierarchy. In some cases, this method is not suitable, for example, the above Code removes the underlines of all a under Li, but there is a UL in Li, and I do not want to remove the underscores OF A under ul. When using this descendant selector, consider whether you want a style to work for all child elements. This type of descendant selector also plays a role in creating namespaces. For example, the scope of the above Code style is obviously Li. Compatible browsers: IE6 +, Firefox, chrome, Safari, and opera

5.x

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

Tag selector. Use the tag selector to apply to all corresponding tags in the scope. The priority is only higher. Compatible browsers: IE6 +, Firefox, chrome, Safari, and opera

6. x: visited and X: Link

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

Use: the link pseudo class to act on the link tag that has not been clicked. : The hover pseudo class acts on the clicked link. Compatible browsers: IE7 +, Firefox, chrome, Safari, and opera

7. x + y

ul + p {      color: red;   } 

The adjacent selector matches the first P after UL and sets the text color in the paragraph to red. (Match only the first element) compatible browsers: IE7 +, Firefox, chrome, Safari, and opera

8. x> Y

div#container > ul {     border: 1px solid black;   } <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>

Child selector. Unlike the child selector x y, the Child selector only works for the direct child level y under X. In the preceding CSS and HTML examples, div # container> ul only takes effect for UL of the last level in container. In theory, x> Y is a recommended selector. Unfortunately, IE6 does not support it. Compatible browsers: IE7 +, Firefox, chrome, Safari, and opera

9. x ~ Y

ul ~ p {      color: red;   }

Adjacent selector. Different from the preceding x + y, X ~ Y matches all yelements at the same level as X, while x + y matches only the first element. Compatible browsers: IE7 +, Firefox, chrome, Safari, and opera

10. X [title]

a[title] {      color: green;   } 

Attribute selector. For example, the above code matches the link element with the title attribute.

Compatible browsers: IE7 +, Firefox, chrome, Safari, and opera

11. X [Title = "foo"]

a[href="http://css9.net"] {     color: #1f6053; } 

Attribute selector. The code above matches all links that have the href property and href is the http://css9.net.

This function is good, but it has some limitations. What should we do if we want to match all links of href containing css9.net? Look at the next selector. Compatible browsers: IE7 +, Firefox, chrome, Safari, and opera

12. X [Title * = "css9.net"]

a[href*="css9.net"] {     color: #1f6053;   }

Attribute selector. As we want, the above code matches all links in href that contain "css9.net.

Compatible browsers: IE7 +, Firefox, chrome, Safari, and opera

13. X [href ^ = "HTTP"]

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

Attribute selector. The above code matches all links starting with HTTP in href. Compatible browsers: IE7 +, Firefox, chrome, Safari, and opera

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

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

Attribute selector. Use $ in the attribute selector to match the elements ending with a specific string. In the hosts code, all links are connected to the extended .jpg image. (, Here is the .jpg image. If you want to apply it to all the image links, see the next selector .)

Compatible browsers: IE7 +, Firefox, chrome, Safari, and opera

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

The previous selector mentioned how to match all image links. If you use X [href $ = ". jpg"], you need to do the following:

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

It seems troublesome. Another solution is to add a specific attribute for all image links, such as 'data-file'

HTML code

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

The CSS code is as follows:

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

In this way, the font color of all links to the image is red.

Compatible browsers: IE7 +, Firefox, chrome, Safari, and opera

15. X [Foo ~ = "Bar"]

Attribute selector. The Tilde In the attribute selector allows us to match one of multiple values separated by spaces in the attribute values. Take the following example:

HTML code

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

CSS code

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

In the above example, the font color that matches the "external" link in the data-Info property is red. Match the link containing "image" in the data-Info property to set a black border.

Compatible browsers: IE7 +, Firefox, chrome, Safari, and opera

17. X: checked

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

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

The above code matches all selected single-choice radio and sets a black border of 1px.

Compatible browsers: ie9 +, Firefox, chrome, Safari, and opera

18. X: After and X: before

These two pseudo classes and content are combined to Append content before or after an element. Let's look at a simple example:

h1:after {content:url(/i/logo.gif)} 

The above code displays an image after the H1 title.

We often use it to clear the floating, as follows:

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

19. X: hover

div:hover {     background: #e3e3e3;   } 

: Hover pseudo class: Specifies the style of the elements that are outdated when the mouse is clicked. The above Code sets the background color of the div.

Note that in IE 6, hover can only be used for link elements.

Here is an example of using border-bottom to look more elegant than text-decoration when the link is set to be out of date. The Code is as follows:

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

Compatible browsers: IE6 +, Firefox, chrome, Safari, and opera

20. X: Not (selector)

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

The negative pseudo-class selector is used to exclude certain elements when matching elements. In the preceding example, the font color of the DIV element whose ID is container is set to blue.

Compatible browsers: ie9 +, Firefox, chrome, Safari, and opera

21. X: pseudo element

: The pseudo class is used to add a style to the element fragment. For example, the first letter of a paragraph or the first line. Note that: pseudo classes can only be used for block elements.

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

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, and opera

(IE6 is actually supported. Some surprises .)

22. X: Nth-child (N)

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

This pseudo class is used to set the style of the nth element (starting from 1) in a sequence element (such as Li and TR. In the above example, set the font color of the third list element Li to red.

Let's take a look at a more flexible usage. In the following example, we can set the style of the nth and even elements, which can be used to implement line-by-line color change:

tr:nth-child(2n) {      background-color: gray;   } 

Compatible browsers: ie9 +, Firefox, chrome, and Safari

23. 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 from the last element of a sequence. In the above example, set the font color of the last and second list elements.

Compatible browsers: ie9 +, Firefox, chrome, Safari, and opera

24. 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 matches not a sequence element, but an element type. For example, the code above sets the third unordered list ul border on the page.

Compatible browsers: ie9 +, Firefox, chrome, and Safari

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

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

Similar to the X: Nth-of-type (n) function, the difference is that it starts from the last appearance of an element. In the preceding example, the last and third unordered list borders are set.

Compatible browsers: ie9 +, Firefox, chrome, Safari, and opera

26. 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 or bottom border of the first or last element of a sequence, such:

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

Compatible browsers: IE7 +, Firefox, chrome, Safari, and opera

27. 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, and opera

28. X: Only-Child

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

This pseudo class is rarely used. In the above example, there is only one P under the DIV, that is, if there are multiple P in the DIV, it will not match.

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

In the above Code, the Section P in the first Div will be matched, while the Section P in the second Div will not.

Compatible browsers: ie9 +, Firefox, chrome, Safari, and opera

29. X: only-of-type

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

This pseudo-class matches that there is only one sub-element under its parent container, and it has no neighbor element. For example, the above code matches the list elements with only one list item.

Compatible browsers: ie9 +, Firefox, chrome, Safari, and opera

30. X: first-of-type

: First-of-type: the pseudo-class has the same effect as nth-of-type (1), and matches the first element. Let's look at an example:

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

In the preceding HTML code, what should we do if we want to match only the list items in list item 2:

Solution 1:

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

Solution 2:

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

Solution 3:

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

Compatible browsers: ie9 +, Firefox, chrome, Safari, and opera.

Summary:

If you are using an earlier version of Web browser, such as IE 6, be sure to check whether it is compatible when using the CSS selector above. However, this should not be a reason to prevent us from learning to use it. During the design, you can refer to the browser compatibility list, or use scripts to make earlier browsers support them.

Another point is that when we use the selectors of the Javascript class library, such as jquery, we should try to use these native css3 selectors as much as possible, because the selector engine of the class library will parse them through the built-in browser, this results in a faster speed.

Original article: http://net.tutsplus.com/tutorials/html-css-techniques/the-30-css-selectors-you-must-memorize/