CSS selectors, cascading

Source: Internet
Author: User

CSS Selector

. class

. intro

Select all elements of class= "Intro" .




Select all elements of id= "FirstName" .




Selects all elements.




Select All <p> elements.




Select All <div> elements and all <p> elements.



Div p

Select all <p> elements inside the <div> element . : Descendant Selector




Selects all <p> elements of the parent element for the <div> element. ( child selector, select descendants only )




Select all <p> elements that are immediately after the <div> element . Neighboring sibling selector




Selects all elements with the target property.




Select all elements of target= "_blank" .




Select all elements of the title property that contain the word "flower" .




Select all elements with the lang attribute value beginning with "en" .


Neighboring sibling selector

1 <!DOCTYPE HTML>2 <HTML>3 <Head><!--neighboring sibling selector  --4 <style>5 div+p6 {7 Background-color:Yellow; 8 }9 </style>Ten </Head> One  A <Body> -  - <Div></Div> the <P>I'm Donald Duck.</P><!--immediately after the Div - -  - <P>I live in Duckburg.</P><!--not immediately following the Div - -  +  - </Body> + </HTML>

Cascade (Style priority):

First of all

    • It 's marked! Important user-style user style (reader): Is the user browsing the Web page, the style you set.
    • It 's marked! Important author style: refers to the style written by the creator (the person who made the page) to present the desired effect.
    • Author style
    • User Style
    • Styles for browser/user agent Apps

The order of the rules is then determined according to the particularity of the selector. The style of the special high selector covers the particulars low. The description of the particularity can be regarded as a 4-digit number: ABCD (0000). The specificity is divided into four levels, ABCD

    • If the style is in line style, both style= "~ ~ ~", then a=1 particularity 1000
    • B is the total number of ID selectors, such as #a1 #a2 {} specificity is 0200
    • C is class, Pseudo class, total number of property selectors
    • D is the total number of type selectors and pseudo-element selectors

If the two styles are of the same specificity, the later definition overrides the previous one.

CSS selectors, cascading

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.