Home > Developer > JavaScript
[Css notes (2)] How to apply rules to elements ?, Css notes
Css Selector
Before the introduction, let's take a look at css which is roughly divided into several selectors:
1. Type selector (element selector)
2. Descendant selector (all descendant of an element)
3. pseudo class (: active,: hover,: focus,: link,: visited,: first-child,: lang)
4. General selector (*)
5. Sub-selector (direct descendant of elements)
6. Adjacent compatriot selector (an element after the element under the same parent element)
7. Attribute Selector
Which of the above statements is too abstract? Let's just give an example, such as the following page 1.html structure:
<!DOCTYPE html>The corresponding selectors are:
1. Type selector div {color: red ;}
2. Descendant selector # content div {background: # ccc ;}
3. pseudo class p: first-child {padding: 2px ;}
4. General selector (*) * {margin: 0 ;}
5. Sub-Selector # content> div {font-size: 14px ;}
6. Adjacent compatriot selector h2 + p {width: 200px ;}
7. Property selector div [id = "content"] {border: 2px solid # fff ;}Css cascade and particularity
What kind of style does an element select when multiple css rules are applied to it ?, Css will deal with this type of conflict through stack. The stack does not assign importance to each rule, and the rules with high importance will cover the rules with low importance. The stack uses the following order of importance:
1. marked! Important user Style
2. marked! Important author (site developer) style
3. Author (site developer) style
4. User Style
Then the Rule Order is determined by the particularity of the selector. How to calculate the particularity? We divide the selector into four levels from high to low, and apply them to the following four rules:
1. a is a row style (Inline style). If yes, It is 1000. If no, It is 000, that is, a * 1000.
2. B is the number of id selectors multiplied by 100, that is, B * 100
3. c is the class. The number of pseudo classes and attribute selectors is multiplied by 10, and c * 10.
D is the number of element selectors and pseudo element selectors multiplied by 1, d * 1
Element special value (w = a * 1000 + B * 100 + c * 10 + d) and then select the application element with the largest special value
We also take the corresponding 1.html page as an example:
The table in the figure is displayed, so the page after applying the style is displayed in the browser as follows:
Pseudo class and pseudo elementWhen I first learned how to mix pseudo classes and pseudo elements, they are different.
Pseudo class
: Active |
Add a style to the activated Element |
: Focus |
Add a style to an element with a keyboard focus |
: Hover |
Add a style to the element when the mouse is hovering over the element |
: Link |
Add a style to an inaccessible Link |
: Visited |
Add a style to an accessed Link |
: First-child |
Add a style to the first child element of an element |
: Lang |
Add a style to an element with the specified lang attribute |
This is a pseudo element
: First-letter |
Add a special style sheet to the first letter of the text |
: First-line |
Add a style to the first line of text |
: Before |
Add content before the element |
: After |
Add content after the element |
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
