Inline style, such as <span style = "color: Red">... </span>;
Id selectors, for example, # myid;
Class, attribute selector, pseudo class (classes, attributes and pseudo-classes), such as. Class {...}, [href $ = dudo.org],: hover;
Type (elements), pseudo-type selector (pseudo-elements), such as P {...},: first-line {...};
How are their priorities measured? As mentioned above, each of these classes has different numerical values, where:
Intra-row style: 1000
Id selector: 0100
Class separator: 0010
Type Selection character: 0001
It should be pointed out that all these values are not decimal numbers, and 1000 is onlyCodeIt is a inline style,
for example, body # wrap P {...}, then its priority index is 1 + 100 + 1 = 102, while the body Div # wrap P {...} the priority index is 1 + 1 + 100 + 1 = 103.
let's look at other examples:
* {} 0
Li: first-line {} 2 (one element, one pseudo-element)
ul ol + Li {} 3 (three elements)
ul ol Li. red {} 13 (one class, three elements)
style = "1000 (one inline Styling)
Div P {} 2 (two HTML selectors)
Div p. sith {} 12 (two HTML selectors and a class selector)
body # Darkside. sith P {} 112 (HTML selector, Id selector, class selector, HTML selector; 1 + 100 + 10 + 1)
Read this Code:
<HTML>
<Head>
<Style type = "text/CSS">
# Wrap # Content {color: Blue ;}
# Content {color: red ;}
</Style>
</Head>
<Body>
<Div id = "Wrap">
<Div id = "content"> This is a text here </div>
</Div>
</Body>
</Html>
The code is displayed in blue.