Look at this article, css selector knowledge summary

In general, the more special the selector, the higher its priority. T hat is, the more accurate the selector points, the higher its priority. T ypically, we use 1 for the priority of the label name selector, 10 for the class selector, and 100 for the ID selector. F or example, in the example above, .polaris span s color:red; T he selector priority is 10 plus 1 is 11, while .polaris has a priority of 10, and the browser naturally displays the red word. With this in understanding, the following priority calculations are easy:

For when to use which selectors, the principles for using different selectors are:

1. Accurately select the label to control;
2. Use the selector with the most reasonable priority;
3. HTML and CSS code is as simple and beautiful as possible. Usually:

(1) The most common selectors are class selectors.

(2) li, td, dd, etc. often appear in large numbers of consecutive, and the same or similar style of labels, we use the class selector and label name selector combined with the descendant selector .xx li/td/dd .

(3) ID selectors are rarely used, and of course many front-end developers prefer header, footer, banner, and conntent to set up as ID selectors, because the same style cannot be a second time in a page.

Here you have to mention the way CSS is written using the introduction of CSS within the label, i.e.:

The priority at this time is the highest. W e give it a priority of 1000, which is not recommended for new users. T his is also completely contrary to the idea of content and display separation. The benefits of DIV-CSS can no longer be reflected.

---

1. Avoid using universal selectors

After the browser matches all the elements in the document, it matches the element content up step by step, until the root node of the document. Therefore, the matching overhead is very large, so you should avoid using a key selector that is a pass-through selector.

2. Avoid using labels or class selectors to restrict id selectors

3, avoid using label restriction class selector

4, avoid the use of multi-layer label selectors. Use class selector replacement to reduce csss lookups

5, avoid the use of sub-selectors

6, the use of inheritance

---

Simple and efficient CSS

The so-called efficient CSS is to let the browser look for style matching elements as little as possible, here are some of our common write CSS make some inefficient errors:

Do not use the label name in front of the ID selector

Generally written: DIV-divBox

Better writing: #divBox

Explanation: Because the ID selector is unique, adding div adds unnecessary matches.

Don't use the label name before the class selector

General writing: span.red

Better writing: .red

Explanation: Same as the first one, but if you define multiple .reds and are different styles under different elements, you can't remove them, as defined in your CSS file as follows:

If this definition is not to be removed, it will be confusing to remove, but it is recommended not to write this

Use hierarchical relationships as little as possible

General writing: #divBox p .red:color:red; }

Better writing: .red.

Use class instead of hierarchical relationships

General writing: #divBox ul li a'display:block; }

Better writing: .block (display: block; }

---

Presumably everyone knows the "id", "class" and "class" selectors, and you're using them all, so you're making the wrong choice with a greater level of flexibility. M ost of the selectors mentioned below are under the CSS3 standard, so they only work in the latest version of the browser, and you should keep them all in your smart head.

1.*

Before we look at the more advanced selectors, we should get to know this well-known empty selector. T he asterisk will select all the elements on the page. M any developers use it to empty margins and padding. O f course it's no problem for you to use this in practice, but I don't recommend using it in a production environment. I t adds a lot of unnecessary things to the browser. It can also be used to select all child elements of an element.

It selects #container elements under the list. Of course, I still don't recommend you to use it, if possible.

Compatibility

• IE6+
• Firefox
• Chrome
• Safari
• Opera

2. #X

You can use id to locate an element in the selector. T hat's what people usually do, and then when you use it, you have to be pretty careful. I need to ask myself: Do I have to assign this element an id to locate it?

The id selector is very strict and you can't use it again. If possible, try using a label name, a new element in HTML5, or a pseudo-class.

Compatibility

• IE6+
• Firefox
• Chrome
• Safari
• Opera

3. . Ⅹ

This is a class selector. U nlike the id selector, it can locate multiple elements. Y ou can use class when you want to style multiple elements. When you're going to decorate a particular element, it's using id to locate it.

Compatibility

• IE6+
• Firefox
• Chrome
• Safari
• Opera

4. X Y

The next common use is the look-out selector. I f you want to be more specific about locating an element, you can use it. F or example, if you don't need to locate all the a elements, you just need to position the a label under the li label? That's when you need to use the selection selector.

Expert Tip: If your selector is like X Y Z A B.error, you're wrong. Always remind yourself if you really need to decorate so many elements.

Compatibility

• IE6+
• Firefox
• Chrome
• Safari
• Opera

5. X

If you want to locate all the labels on the page, not through id or 'class', it's simple to use the type selector directly.

Compatibility

• IE6+
• Firefox
• Chrome
• Safari
• Opera

6. X:visited and X:link

We use: link, a pseudo-class, to locate all links that have not been visited.

In addition, we also use: visited to locate all links that have already been visited.

Compatibility

• IE7+
• Firefox
• Chrome
• Safari
• Opera

7. X+Y

This is called an adjacent selector. I t directs the selection of the direct successor element of the specified element. The example above is to select the first paragraph after all ul tags and set their colors to red.

Compatibility

• IE7+
• Firefox
• Chrome
• Safari
• Opera

8. X>Y

The difference between X Y and X sgt; Y is that the next conductor selects its direct child elements. Take a look at the following example:

#container only select all direct ul elements under div with id 'container' selected. It does not navigate to a ul element like the one under the first li.

For some reason, using a child node combination selector can have many performance benefits. In fact, this is highly recommended when using the css selector in javascript.

Compatibility

• IE7+
• Firefox
• Chrome
• Safari
• Opera

9. X ~ Y

The brother node combination selector is very similar to the X-Y, and then it's not that strict. T he ul-p selector selects only those elements that follow the specified element immediately. This selector selects all the matching elements that follow the target element.

Compatibility

• IE7+
• Firefox
• Chrome
• Safari
• Opera

10. X[title]

This is called a property selector, and in this example above, only elements with title properties are selected. A nchor labels that do not have this property will not be modified by this code. S o think about if you want to be more specific about screening? That...

Compatibility

• IE7+
• Firefox
• Chrome
• Safari
• Opera

11. X[href="foo"]

The above piece of code will set the anchor label with a href property value of http://strongme.cn to green, while the other labels will not be affected.

This can be used, but it's still a bit dead, if it's not this link, it's a similar link, then you have to use a regular expression.

Compatibility

• IE7+
• Firefox
• Chrome
• Safari
• Opera

12. X[href="strongme"]

Tada, which is exactly what we need, strongme must appear in href of the anchor strongme.cn or strongme.com or www.strongme.cn be selected.
But remember that this is a very broad expression. If the anchor label does not point to strongme site, and if you want more specific $ use s and $ to represent the beginning and end of the string, respectively. ^

Compatibility

• IE7+

• Firefox

• Chrome

• Safari

• Opera

13. X[href^="href"]

You must have been curious, some sites next to the anchor label there will be an external chain icon, I also believe you have certainly seen this situation. T his design will make it clear that you will jump to another website.
It's easy to do with carat symbols. I t is typically used to identify the beginning in a regular expression. If we want to locate a label that starts http we can use code similar to the one above. href

Note that we http:// which is not necessary because it doesn't https://

What if we want to find all the anchor tags that point to a picture? Then let's use &

Compatibility

• IE7+

• Firefox

• Chrome

• Safari

• Opera

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

This time we used the regular expression $ represent the end of the string. T his code means searching for all the picture links, or other links .jpg the image. But remember that this writing doesn't gifs pngs

Compatibility

• IE7+

• Firefox

• Chrome

• Safari

• Opera

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

Back in Article 8, how do we select all picture types png jpeg jpg gif W e can use multi-selectors. Here's a look:

But it says it hurts, and it's inefficient. A nother approach is to use custom properties. W e can add a property data-filetype type of picture this link points to.
[html]
Image Link That with this hook, we can go to the standard way of selecting only the anchor image the file type image.

Compatibility

• IE7+

• Firefox

• Chrome

• Safari

• Opera

16. X[foo~="bar"]

I think it's going to surprise your little buddy. F ew people know this technique. T his ~ locate labels where a property value is a space separating multiple values.
Continuing with the example in Article 15, we can set data-info that can be used to set any value that we need to be space-separated. In this example we will indicate that they are external connections and picture links.

Once we've set this flag for these elements, we ~ to locate the labels.

## 17. X:checked

The pseudo-class writing above can locate the checked single and multi-box, and that's it.

Compatibility

• IE9+

• Firefox

• Chrome

• Safari

• Opera

18. X:after

before and after these two pseudo-classes. I t seems that every day everyone can find creative ways to use them. T hey generate something around the selected label.
Many properties are used inside for the first time when using the .clear-fix technique.

The above code fills in a blank after the target label and clears it. Y ou must put it in your treasure pot in this way. T his is overflow:hidden method is not working.

According to the CSS3 standard, two colons can be :: . T hen, for compatibility, the browser also accepts a double quote. In fact, in this case, it is wise to use a colon.

Compatibility

• IE8+

• Firefox

• Chrome

• Safari

• Opera

19. X:hover

Needless to say, everyone must know it. T he official saying user action pseudo class It sounds a little confusing, but it's okay. If you want to paint some color in a place where the user's mouse floats, this pseudo-class writing can be done.

Note that older versions of IE only work for a pseudo-class :hover the anchor a label.

It is usually used when the mouse floats over the anchor link and the border is added.

Expert Tip: border-bottom:1px solid black t han text-decoration:underline I t's going to look a lot better.

Compatibility

• IE6 plus (IE6 only works on anchor labels)

• Firefox

• Chrome

• Safari

• Opera

20. X:not(selector)

取反 to take anti-pseudo classes, assuming that we select all div tags div id for container Then the code above can do it.

Or I want to select all labels except all out of the paragraph label.

Compatibility

• IE9+

• Firefox

• Chrome

• Safari

• Opera

21. X::pseudoElement

We can :: to select parts of a label, such as the first paragraph, or the first word without. But remember that you have to use a block label to work.

Pseudo-labels are made up of :: : .

Position the first word

The above code finds all the paragraphs on the page and specifies the first word of each paragraph.

It is usually used in some news and newspapers where the focus is on the content.

Position the first line of a segment

Similar ::first-line the first line of the paragraph is selected.

For compatibility, older browsers were also compatible with single colon writing, :first-line :first-letter :before :after But this compatibility does not work for the newly introduced features.

Compatibility

• IE6+

• Firefox

• Chrome

• Safari

• Opera

22. X:nth-child(n)

Remember when we were faced with how to get the first few elements of the push-down label that there was nowhere to go, and the days of nth-child are gone forever.

Note nth-child accepts a shaping parameter, and then it does not start at 0. If you want to get the second element then the value li:nth-child(2) .

We can even get several sub-labels defined by the variable name. For example, li:nth-child(4n) to get labels every 3 elements.

Compatibility

• IE9+

• Firefox3.5+

• Chrome

• Safari

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

Suppose you have more N elements in a ul tag, and you only want to get the last three li:nth-child(397) can replace it with nth-last-child

This technique can be completely correct in place of the 16th TIP, the difference is that it starts at the end and goes back.

Compatibility

• IE9+

• Firefox3.5+

• Chrome

• Safari

• Opera

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

Once upon a time, we didn't want to select child nodes, we wanted to choose based on the type of element.

Imagine having five ul If you only want to decorate the third of them, id property, you can do it nth-of-type(n) and ul be bordered.

Compatibility

• IE9+

• Firefox3.5+

• Chrome

• Safari

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

Similarly, you can nth-last-of-type to get labels in reverse order.

Compatibility

• IE9+

• Firefox3.5+

• Chrome

• Safari

• Opera

26. X:first-child

This structural pseudo-class can be selected to the first sublabel, which you will often use to remove the first and last borders.

Assuming there's a list, each label has an upper and lower border, the effect is that the first and last one will look a little strange. This is when you can use this pseudo-class to handle this situation.

Compatibility

• IE7+

• Firefox

• Chrome

• Safari

• Opera

27. X:last-child

In first-child last-child is the last label of the parent label.

For example
Label

There's nothing here, it's a List.

The code above sets the background color, removes the browser's default margin, li border for each li to highlight a certain depth.

Compatibility

• IE9+

• Firefox

• Chrome

• Safari

• Opera

28. X:only-child

To tell you the truth, you'll find that you hardly use this pseudo-class. However, it is available and will need it.

It allows you to get parent tags that have only one child tag. Like the code above, only the div of a div is colored.

In the example above, the second div not selected. Once the first div has div sub-paragraphs, this no longer works.

Compatibility

• IE9+

• Firefox

• Chrome

• Safari

• Opera

29. X:only-of-type

Structural pseudo-classes can be used very smartly. I t locates the target of a label that has only one sub-label. Imagine you want to get a ul tag with only ul

Using ul li selects all li That's when only-of-type

Compatibility

• IE9+

• Firefox 3.5+

• Chrome

• Safari

• Opera

30. X:first-of-type first-of-type

Pseudo classes can select the first brother label that specifies a label.

Test

Come and you take list Item 2 out, and if you've already taken it out or given up, go ahead.

Solution 1
There are many ways, we look at some more convenient. The first first-of-type

Find the first ul label, then the direct li and then the second child node.
Solution 2
Another solution is proximity to selectors.

In this case, find the direct ul label under p and then find its last direct sub-label.

Solution 3
We can play with these selectors at will. Let's take a look at:

Get the first ul label on ul page first, and then find the last sublabel.

Compatibility

• IE9+

• Firefox 3.5+

• Chrome

• Safari

• Opera

Conclusion

If you want to compromise with older browsers, such as IE6, you'll have to be careful when using these new selectors. B ut don't let IE6 stop you from learning these new skills. T hen you're cruel to yourself. Remember to check the compatibility list more, or use Dean Edward's excellent IE9 .js script to get your browser to have these features.

Second, when using jQuery, try to use the native CSS3 selector. M aybe live to keep your code running fast. This allows the selector engine to use the browser native parser instead of the selector itself.