Home > Developer > Web Develop
Today, when learning CSS encountered a problem, with the external CSS style sheet to change the color of a <p> element, dead or alive is not change, and finally found to be the priority of the problem (I take it for granted that the priority on the back of the high, committed an empirical error).
First look at the code: HTML
1 <!DOCTYPE HTML>2 <HTML>3 <Head>4 <MetaCharSet= "Utf-8">5 <title>This is the second Test page</title>6 <Linkrel= "stylesheet"type= "Text/css"href= "./css/demo.css">7 </Head>8 9 <Body>Ten <!--This page is divided into three large blocks - One <!--This is the first block . - A <DivID= "D1"> - <PID= "P1">Text with ID p1</P> - <PID= "P2">Text with ID P2</P> the <PID= ' P3 '>Text with ID p3</P> - </Div> - <!--This is a second block . - - <DivID= "D2"> + <Pclass= "C1">Text with Class C1</P> - <Pclass= "C2">Text with Class C2</P> + <PID= "PC3"class= ' C3 '>Text with Class C3</P> A </Div> at <!--This is a third block . - - <Div> - </Div> - </Body> - </HTML>
CSS code:
1 #d12{3 background:Blue;4}5 #d26{7 background:Yellow;9 Color: White;Ten} One . c3 A{ - Color:Red; -} the P -{ - Color:Green; - text-align:Center; +}
The code in these two files should be, the structure is very clear. So focus on the CSS code.
#d1和 #d2 are ID selectors, they want the background in the first div to be blue, the background in the second div to be yellow, and the font to be white;
. c3 controls the P element in the third row of the second Div, which you want to be red;
P controls the display style of the paragraph text in the full text, where you want them to be centered, and the text color to be green.
So let's guess, what's the result of the page display?
I found a post on the Internet, which is organized:
W3Schools says that the order of the CSS is "style on element" > "style element on file header" > "External style file";
For property controls that are in a style file:
1. The more precise the element selector selection of the style sheet, the higher the style precedence: The style specified by the ID selector > The style specified by the class selector > the style specified by the element type selector;
2. For styles specified by the same type selector, the higher the precedence in the style sheet file: Note that this is the higher priority in the style sheet file, rather than the order in which the element class appears.
Finally put on the implementation of my code results for your reference:
Precedence of various selectors (when defining attributes) in CSS (external style sheets)
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
