CSS selection operator and Priority Calculation

Source: Internet
Author: User

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.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.