CSS3 Selector Sorting (with CSS Priority Points)
May 04, 2021 CSS3
Table of contents
CSS is one of the most powerful tools available for web design. U sing it we can change the interface of a website in a few minutes without changing the label of the page. B efore we delve into CSS selectors, we should first understand how CSS priorities work. F or example, add a class to a p tag, but some properties in that class do not work after execution. A Firebug look found that properties that didn't work were overwritten. This is the CSS selector priority issue.
When we write CSS, we need to note that some selectors are higher than others in cascade, and the selectors we write on the last face will not necessarily overwrite the styles we write on the same element earlier. S
o how do you calculate the priority of the specified selector?
If you consider that it is fairly simple to represent priority as four numbers separated by commas, such as: 1, 1, 1, or 0, 2, 0, 1
The first number (a) is usually 0, unless the style attribute is used on the label;
The second number (b) is the sum of the number of ids on the selector;
The third number (c) is the sum of the other property selectors and pseudo-classes used on the selector.
This includes class (.example) and property selectors (e.g. li (id=red));
The fourth number (d) calculates elements (like table, p, div, etc.) and pseudo-elements (like: first-line, etc.);
The universal selector is a 0 priority;
If the two selectors have the same priority, the one that follows the style sheet works.
Let's look at a few examples, which may be easier to understand:
#sidebar h2 — 0, 1, 0, 1
h2.title — 0, 0, 1, 1
h2 + p — 0, 0, 0, 2
#sidebar p:first-line — 0, 1, 0, 2
In the following example, the first one will work because it has a higher priority than the second:
#sidebar p#first { color: red;
} — 0, 2, 0, 1
#sidebar p:first-line { color: blue;
} — 0, 1, 0, 2
At least it's important to basically understand how priority works, but some tools, such as Firebug, when we review a specified element, it's useful to list all the css selectors by selector's priority to let us know which selector is valid on the specified element, making it easy to see that selector working on an element.
_1615742039.8835113.webp)
CSS3 selector classification
_1615742042.642066.webp)
The syntax of the selector
1, basic selector syntax
| Selector | Type | Description of the function |
| * | The all-in-one selector | Select all HTML elements in the document |
| E | Element selector | Select the HTML element of the specified type |
| #id | ID selector | Select any type of element that specifies an ID property value of "id" |
| .class | Class selector | Select any number of elements of any type that specify a class property value of "class" |
| selector1,selectorN | The group selector | The elements matched by each selector are assembled together |
2, hierarchy selector syntax
| Selector | Type | Description of the function |
| E F | Descendant Selector (Include Selector) | Select the matching F element, and the matching F element is included in the matching E element |
| E>F | Sub-selector | Select the child element of the matching F element, and the matching F element matches the E element |
| E+F | Adjacent Brother Selector | Select the matching F element, and the matching F element is immediately behind the matching E element |
| E~F | Universal selector | Select the matching F element, and all matching F elements are located after the matching E element |
3, dynamic pseudo-class selector syntax
| Selector | Type | Description of the function |
| E:link | Link the pseudo-class selector | Select a matching E element, and the matching element is defined as a hyperlink that has not been accessed. Often used on link stroke points |
| E:visited | Link the pseudo-class selector | Select the matching E element, and the matching element is defined as a hyperlink and has been accessed. Often used on link stroke points |
| E:active | The user behavior selector | Select the matching E element, and the matching element is activated. Often used to link stroke points and buttons |
| E:hover | The user behavior selector | Select a matching E element, and the user mouse stays on element E. Only a:hover is supported by IE6 and the following browsers |
| E:focus | The user behavior selector | Select the matching E element, and the matching element gets the focus |
4, target pseudo-class selector
| Selector | Description of the function |
| E:target | Select all elements that match E, and the matching elements are pointed to by the relevant URL |
5, UI element state pseudo-class selector syntax
| Selector | Type | Description of the function |
| E:checked | Check the status pseudo-class selector | Matches the selected check button or the turn button form element |
| E:enabled | Enable the status pseudo-class selector | Matches all enabled form elements |
| E:disabled | Unavailable status pseudo-class selector | Matches all disabled form elements |
6, the structure pseudo-class selector uses syntax
| Selector | Description of the function |
| E:first-child | Element E as the first child element of the parent element. Equivalent to E:nth-child (1). |
| E:last-child | Element E as the last child element of the parent element. Equivalent to E:nth-last-child (1). |
| E:root | Select the root element of the document where the matching element E is located. In html documents, the root element is always html, and the selector matches the html type selector |
| E F:nth-child(n) | Select the nth child element F of the parent element E. Where n can be an integer (1,2,3), a keyword (even, odd), a formula (2n-1), and the n-value starts at 1 instead of 0. |
| E F:nth-last-child(n) | Select the penultimate child element F of parent element E. This selector is the opposite of the E:nth-child(n) selector, but uses the same method, where: nth-last-child (1) always matches the last element, equivalent to last-child |
| E:nth-of-type(n) | Select the nth E element within the parent element that has the specified type |
| E:nth-last-of-type(n) | Select the penultimate E element with the specified type within the parent element |
| E:first-of-type | Select the first E element with the specified type within the parent element, equivalent to E:nth-of-type(1). |
| E:last-of-type | Select the last E element within the parent element that has the specified type, equivalent to E:nth-last-of-type(1). |
| E:only-child | Selecting a parent element contains only one child element, and that child element matches the E element |
| E:only-of-type | Selecting a parent element contains only one child of the same type, and that child element matches the E element |
| E:empty | Select an element that does not have child elements, and the element does not contain any text nodes |
Note: (1), "ul>li:nth-child (3)" does not necessarily select the 3rd child element li in the list ul element, only the list ul 3 li element does not exist before the other element, the proposition is meaningful, otherwise it will not change the style of the 3rd li element of the list.
(2), the parameter in nth-child (n) can only be n and can not be replaced with other letters.
(3), nth-child (odd) selects odd items, while use: nth-last-child (odd) selects even numbers
7, negating the pseudo-class selector
| Selector | Description of the function |
| E:not(F) | Matches all E elements except element F |
8, property selector syntax
| Selector | Description of the function |
|---|---|
| [ attribute ] | Used to select elements with specified properties. |
| [ attribute = value ] | Used to select elements with specified properties and values. |
| [ attribute ~= value ] | Used to select elements that contain the specified vocabulary in the property value. |
| [ attribute |= value ] | Used to select an element with a property value that begins with a specified value, which must be the entire word. |
| [ attribute ^= value ] | Each element that matches a property value that begins with a specified value. |
| [ attribute $= value ] | Each element that matches a property value to end with a specified value. |
| [ attribute *= value ] | Each element of the matching property value contains the specified value. |
Note: Examples of the "links item" and "links item" and the a .class "links""..." is that no matching element can be found, only a .class?"links item". to match