Home > Developer > Web Develop
Three CSS selectors: ID selector #test1{}, class selector. test2{}, Tag Selector div{} to three div:<div> I'm a normal div</div>, <div id= "Test1" > I am #test1</div>, <div class= "test2" > I am the influence of class</div>, they are three is also div tag, so div affects three background, with ID to explain which div to play a role , finer, and more class-controlled, with a greater range of Div, which affects the three selectors here
The ID selector, class selector, tag Selector, derived selector div p{}div p, derived classes (depending on the hierarchy between the elements);
<style>
#test1 {
width:100;
height:100px;
border:1px solid red;
}
. test2{
width:100px;
height:100px;
BORDER:1PX solid blue;
}
div{
width:100px;
height:100px;
Background:pink;
margin:10px;
}
Div p{
Color:blue;
}
</style>
<body>
<div> I'm a normal div.
<p> I am a div under the P tag </p>
</div>
<p> I am independent p tag </p>
<div id= "Test1" > I am #test1</div>
<div class= "Test2" > I am class</div>
</body>
CSS Precedence: Multiple selectors control an element at the same time, and set the same CSS property, the finer the control of the higher priority;
<style>
p{
color:red;
}
. test2{
Color:bule;
}
#test1 {
Color:green;
}
Div #test1 {
Color:pink;
}
</style>
<body>
<div>
<p id= "test1" class= "test2" >css selector </p>
</div>
</body>
CSS selectors and CSS precedence
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
