Shulou(Shulou.com)06/02 Report--

Today, I will talk to you about how to parse the commonly used CSS selectors, many people may not know much about it. In order to make you understand better, the editor summarized the following content for you. I hope you can get something according to this article.

You may have mastered the basic css selectors such as id, class, and background selectors. But that's far from what css is all about. Here is a systematic analysis of the 30 most commonly used selectors in css, including our biggest headache for browser compatibility. Only by mastering them can we really appreciate the great flexibility of css.

1. *

* {margin: 0; padding: 0;}

The star selector works on every element on the page. Web designers often use it to set the margin and padding of all elements in the page to 0. The * selector can also be used in a subselector.

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

The above code applies to all child elements where id is the container element. Unless necessary, I do not recommend the use of star selectors on the page, because its scope is too large and consumes browser resources. Compatible browsers: IE6+, Firefox, Chrome, Safari, Opera

2. # X

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

The pound sign scope has elements of the corresponding id. Id is one of our most commonly used css selectors. The advantage of id selector is accuracy, high priority (priority cardinality is 100, much higher than class's 10). As the best choice for javascript script hooks, it is also obvious that the priority is too high and the reusability is poor, so before using id selector, we * ask ourselves, have we really reached the point where we don't use id selector? Compatible browsers: IE6+, Firefox, Chrome, Safari, Opera

3. .X

.error {color: red;}

This is a class selector. The difference between a class selector and an id selector is that a class selector can act on 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. Used to select the sub-element Y under the X element, it should be noted that the selector in this way will select all the matching child elements under it, regardless of the level, so there are cases that are not suitable for use, such as the above code to remove the underscore of all a under li, but there is also a ul in li, I do not want the an of li under ul to be underlined. When using a later generation selector, consider whether you want a style to work for all descendant elements. Another function of this descendant selector is to create a namespace-like effect. 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 apply to all corresponding tags within the scope. Priority 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;}

Use: the link pseudo class acts on unclicked link tags. The hover pseudo-class acts on the clicked link. Compatible browsers: IE7+, Firefox, Chrome, Safari, Opera

7. Xeroy

Ul + p {color: red;}

Adjacent selector, the above code will match the * p after ul, setting the text color within the paragraph to red. (only match * * elements) compatible browsers: IE7+, Firefox, Chrome, Safari, Opera

8. X > Y

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

Sub-selector. Unlike the descendant selector X Y, the sub selector only works on the direct child Y under X. In the css and html examples above, div#container > ul only works on the most recent level of ul in container. Theoretically, X > Y is worth advocating, 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 Xneighbor Y mentioned earlier, matches all Y elements at the same level as X, while Xneighbor Y matches only *. Compatible browsers: IE7+, Firefox, Chrome, Safari, Opera

10. X [title]

A [title] {color: green;}

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

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

11. X [title= "foo"]

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

Property selector. The above code matches all links that have a href attribute and whose href is http://css9.net.

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

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

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

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

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

13. X [href ^ = "http"]

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

Property selector. The above code matches all links in href that start with http. Compatible browsers: IE7+, Firefox, Chrome, Safari, Opera

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

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

Property selector. Use $in the property selector to match elements that end with a specific string. What matches in the above code are all links to images with a .jpg extension. (note that here are just .jpg images. What to do if you want to work on all image links? look at the next selector.)

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

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

It was mentioned in the previous selector how to match all image links. If you use the X [href $= ".jpg"] implementation, you need to do this:

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

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

Html code

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

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

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

15. X [foo~= "bar"]

Property selector. The wavy symbol in the property selector allows us to match one of the multiple values separated by spaces in the property values. Look at the following example:

Html code

Click Me, Fool

Css code

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

In the above example, the font color that contains the "external" link in the matching data-info attribute is red. The link that matches the data-info property that contains "image" sets a black border.

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

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

What matches in the above code is all the radio radio in the selected state, setting the black border of the 1px.

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

18. X:after and X:before

These two pseudo-classes are used in conjunction with content to append content before or after an element. See a simple example:

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

The above code implements the display of a picture behind the H2 title.

We also often use it to clear floats, written 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;}

The hover pseudo-class sets the style of the element when the mouse is crossed. The div outdated background color is set in the above code.

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

Here's a lesson to share: using border-bottom looks better than text-decoration when setting a link to cross the slide line. The code is as follows:

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

Compatible browsers: IE6+, Firefox, Chrome, Safari, 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 above example, the font color of the div element is set to blue except that id is container.

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

21. X::pseudoElement

:: pseudo classes are used to style element fragments. For example, the * letters or lines of a paragraph. It is important to note that this:: pseudo class can only be used for block elements.

The following code sets the style of the * letters in the paragraph:

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

The style of the * lines in the paragraph is set in the following code:

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

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

It's a bit of a surprise that IE6 should support it.)

twenty-two。 X:nth-child (n)

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

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

For a more flexible usage, set the style of the even number of elements in the following example, which can be used to interline color change:

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

Compatible browsers: IE9+, Firefox, Chrome, Safari

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

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

Similar to the X:nth-child (n) function, except that it starts with one element of a sequence. The font color of the penultimate list element is set in the above example.

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

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

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

Similar to the X:nth-child (n) function, except that it matches not a sequence element, but an element type. For example, the above code sets the border of the third unordered list ul that appears on the page.

Compatible browsers: IE9+, Firefox, Chrome, 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, except that it starts from the first occurrence of the element *. In the above example, set the border of the penultimate unordered list

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

twenty-six。 X:first-child

The first-child pseudo-class is used to match * elements of a sequence. We often use it to implement a sequence of * elements or the upper (lower) border of an element, such as:

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

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

twenty-seven。 X:last-child

Ul > li:last-child {border-bottom:none;}

Similar to: first-child, it matches an element in the sequence.

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

twenty-eight。 X:only-child

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

This pseudo-class is less used. In the above example, there is only one p under div, that is, if there is more than one p in div, it will not match.

My paragraph here.

Two paragraphs total.

Two paragraphs total.

The paragraph p in the * div in the above code will be matched, while the p in the second div will not.

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

twenty-nine。 X:only-of-type

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

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

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

thirty。 X:first-of-type

The: first-of-type pseudo-class has the same effect as: nth-of-type (1), matching the * elements that appear. Let's look at an example:

My paragraph here.

List Item 1 List Item 2 List Item 3 List Item 4

In the html code above, what if we want to match only the List Item 2 list items:

Option 1:

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

Option 2:

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

Option 3:

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

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

If you are using an older version of a browser, such as IE 6, be sure to pay attention to its compatibility when using the css selector above. However, this should not be a reason to prevent us from learning to use it. When designing, you can refer to the browser compatibility list, or you can script older browsers to support them as well.

On the other hand, when using the selectors of the javascript class library, such as jquery, we should use these native css3 selectors as much as possible, because the selector engine of the class library parses them through the browser, which will be faster.

After reading the above, do you have any further understanding of how to parse common CSS selectors? If you want to know more knowledge or related content, please follow the industry information channel, thank you for your support.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.