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

This article mainly introduces the priority of the commonly used CSS selector, the article is very detailed, has a certain reference value, interested friends must read it!

Encounter this kind of problem, according to the usual answer, from the global, local (tags, tag attributes, pseudo elements, pseudo classes, etc.).

Remember this: each tag has a default style and an inherited style. Write a tag and try to style it. If you have used it, you can always come up with several:

Id (# box): unique

Class (.box): select all elements whose value of the class attribute is box

Tag (div,p): select all div and p elements

All specified descendants (div p): select all p elements within the div element

Div+p: selects all p elements immediately after the div element

Div~p: select all p elements of the same level as div

Wildcard *: select all elements

Attribute selection (a [target = _ blank]): select all a tags whose target attribute is _ blank

Pseudo-element selector (:: before,:: after): create elements that do not exist in the DOM tree structure and add styles to them

Pseudo-class selector (a:hover, a:active): used to deal with a state of an existing element

Priority

! important (weight: infinite) > inline style (weight: 1000) > ID selector (weight: 1000) > class selector = attribute selector (weight: 10) > element selector = pseudo element (weight: 1) > wildcard selector (weight: 0) > inheritance (no weight value) > browser default attribute

These are all the contents of this article entitled "what are the priorities of commonly used CSS selectors?" Thank you for reading! Hope to share the content to help you, more related knowledge, welcome to follow the industry information channel!

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.