This article mainly introduces the summary and efficiency comparison of selector types in CSS, including pseudo-class selectors and pseudo-element selectors. Friends in need can refer to it
We all know that CSS has Additivity (the same element is specified by multiple style rules), inheritance (descendant elements will inherit some styles and attributes of predecessor elements) and priority (due to the superposition and inheritance of CSS, priority will be generated, which refers to Which style rule will eventually act on the specified element? It only follows one rule. The more specific it is, the higher the priority.)
It can be seen from the above that the more specific the selector is, the higher its priority will be. The higher the level,
Here, let’s summarize the css selectors:
1. Basic selectors (tag selector, universal selector, class and ID selection Selector)
Description | CSS Version | |
---|---|---|
Tag selector, matches all elements using the E tag | ||
Universal element selector, matches any element | ||
class Selector, matches all elements containing info in the class attribute | ||
id selector, matches all id attributes equal to The element of footer |
CSS Version | ||
---|---|---|
##E>F |
||
of the E element |
E+F |
|
##E~F | Match any sibling F tag after the E tag||
| ##3. Attribute selector
Selector
E[attribute] | ||
---|---|---|
E[attribute=value] | Match all E elements whose attribute attribute is equal to "value" | |
E[attribute~=value] | Match all attribute attributes with Matches multiple space-separated values, E elements where one value is equal to "value" | |
##E[attribute^=value] | Any sibling F tag after the E tag | 2.1 |
##E[attribute$=value] | Matches all attribute attribute values containing "value "E element | 3 |
E[attribute*=value] | matches all E elements whose attribute attribute value ends with "value" | 3 |
4. Pseudo-class selector |
5. Pseudo-element selector
##Selector
CSS version
E:first-line | Match the first line within all E tags | 2.1 |
---|---|---|
Matches the first letter in all E tags | 2.1 | |
Insert the generated content before the E tag | 2.1 | |
After the E tag Then insert the generated content | 2.1 | |
The above is the detailed content of Summary of selector types in CSS and efficiency comparison examples. For more information, please follow other related articles on the PHP Chinese website!