What is a CSS selector
CSS selectors are used to locate HTML elements that we want to style
What is selector priority
The browser uses priority to determine which attribute values are most relevant to an element and then applies them to that element. Priority is a matching rule based on different kinds of selectors.
What are the selectors of CSS
There are many types of CSS selectors, such as ID selectors, class selectors, tag selectors, generic selectors, attribute selectors, pseudo-class selectors, pseudo-element selectors, group selectors, descendant selectors, child element selectors, sibling element selectors, and so on
4. CSS selector priority
I believe you have written CSS friends know, CSS several common selector priority is:! Important > Inline > ID selector > Class selector > Tag selector > General selector. So how does that work out? There is an algorithmic process like this:
The priority is determined by the values of A, B, C, and D, where their values are calculated as follows:
-
If there is an inline style, then A = 1, otherwise A = 0;
-
The value of B is equal to the number of occurrences of the ID selector;
-
The value of C is equal to the total number of occurrences of class selectors and attribute selectors and pseudo-classes;
-
The value of D is equal to the total number of occurrences of label selectors and pseudo-elements.
In more general terms, at a gambling table, there are several types of chips,
-
An inline style is equivalent to ¥1000;
-
An ID selector is equivalent to ¥100;
-
A class selector/attribute selector/pseudo-class is equivalent to ¥10
-
A label selector/pseudo-element is equivalent to ¥1
Each time one of these selectors appears, it increases the amount of money for the corresponding chip, and ultimately, whoever has the most chips, listens. However, the calculation method here is different from the calculation method in life. The ten hundreds here are not equal to a thousand, but can only be ‘ten hundred’, so even ‘eleven hundred’ is less than a thousand.
The selector | The sample | The weight |
---|---|---|
! impotant | color: #fff ! important; | + up |
Inline selector | “<div style=’color: #fff’></div>” | 1 0 0 0 |
The ID selector | #id | 1 0 0 0 |
Class selector, property selector, pseudo class | .class | 1 0 0 0 |
Tag selectors, pseudo-elements | div | 0 0 0 to 1 |
Universal selector | * | 0 0 0 0 |
Five, the conclusion
CSS styles conflict:
-
For different CSS selectors, you can calculate the weight to determine the priority of the effective style
-
For the same CSS selector, you can determine the effective style based on the writing position
-
Inherited attributes have no weight value and have the lowest priority
The attached:
The selector | example | describe | CSS version |
---|---|---|---|
.class | .intro | Select all elements of class=”intro”. | 1 |
#id | #firstname | Select all elements whose ID =” firstName “. | 1 |
* | * | Select all elements. | 2 |
element | p | Select all <p> elements. | 1 |
element,element | div,p | Select all <div> elements and all <p> elements. | 1 |
element element | div p | Select all <p> elements inside the <div> element. | 1 |
element>element | div>p | Select all <p> elements whose parent is a <div> element. | 2 |
element+element | div+p | Select all <p> elements immediately after the <div> element. | 2 |
[attribute] | [target] | Select all elements with the target attribute. | 2 |
[attribute=value] | [target=_blank] | Select all elements for target=”_blank”. | 2 |
[attribute~=value] | [title~=flower] | Select the title property to contain all elements of the word “flower”. | 2 |
[attribute|=value] | [lang|=en] | Select all elements whose lang attribute value begins with “en”. | 2 |
:link | a:link | Select all unvisited links. | 1 |
:visited | a:visited | Select all the links that have been visited. | 1 |
:active | a:active | Select the active link. | 1 |
:hover | a:hover | Select the link over which the mouse pointer is located. | 1 |
:focus | input:focus | Select the input element that gets focus. | 2 |
:first-letter | p:first-letter | Select the first letter of each <p> element. | 1 |
:first-line | p:first-line | Select the first line of each <p> element. | 1 |
:first-child | p:first-child | Select each <p> element that belongs to the first child of the parent element. | 2 |
:before | p:before | Insert content before the content of each <p> element. | 2 |
:after | p:after | Insert content after the content of each <p> element. | 2 |
:lang(language) | p:lang(it) | Select each <p> element with a lang attribute value starting with “it”. | 2 |
element1~element2 | p~ul | Select each <ul> element preceded by a <p> element. | 3 |
[attribute^=value] | a[src^=”https”] | Select each <a> element whose SRC attribute value begins with “HTTPS”. | 3 |
[attribute$=value] | a[src$=”.pdf”] | Select all <a> elements whose SRC attribute ends in “.pdf”. | 3 |
[attribute*=value] | a[src*=”abc”] | Select each <a> element whose SRC attribute contains the “ABC” substring. | 3 |
:first-of-type | p:first-of-type | Selects each <p> element that belongs to the first <p> element of its parent element. | 3 |
:last-of-type | p:last-of-type | Selects each <p> element that belongs to the last <p> element of its parent element. | 3 |
:only-of-type | p:only-of-type | Select each <p> element that belongs to a <p> element unique to its parent element. | 3 |
:only-child | p:only-child | Selects each <p> element that belongs to a unique child of its parent element. | 3 |
:nth-child(n) | p:nth-child(2) | Select each <p> element that belongs to the second child of its parent element. | 3 |
:nth-last-child(n) | p:nth-last-child(2) | Same as above, counting from the last child. | 3 |
:nth-of-type(n) | p:nth-of-type(2) | Select each <p> element that belongs to the second <p> element of its parent element. | 3 |
:nth-last-of-type(n) | p:nth-last-of-type(2) | Same as above, but counting from the last child. | 3 |
:last-child | p:last-child | Selects each <p> element that belongs to the last child of its parent element. | 3 |
:root | :root | Select the root element of the document. | 3 |
:empty | p:empty | Select every <p> element (including text nodes) that has no child elements. | 3 |
:target | #news:target | Select the current active #news element. | 3 |
:enabled | input:enabled | Select each enabled <input> element. | 3 |
:disabled | input:disabled | Select each of the disabled <input> elements | 3 |
:checked | input:checked | Select each selected <input> element. | 3 |
:not(selector) | :not(p) | Select each element that is not a <p> element. | 3 |
::selection | ::selection | Selects the part of the element selected by the user. | 3 |