- within same specificity , the styles further in the bottom take higher precedence, like a water fall cascade.
p {
color: red;
}
p {
color: blue;
}
The paragraph will be blue.
- There are different specificity base on different selector
- ID 1-0-0
- class 0-1-0
- type 0-0-1
ID is the most specific, so its style will take precedence if class and type classed with ID.
- You can combine selector , so the highest number will take precedence
#num .cili .love {
color: red;
}
1-2-0
#num .cili {
color: blue;
}
1-1-0
Color will still be black
- You can have two class for each element, separated by one space.
<p class="btn btn-success"> </p>
p {
color: red;
}
p {
color: blue;
}
The paragraph will be blue.
- There are different specificity base on different selector
- ID 1-0-0
- class 0-1-0
- type 0-0-1
ID is the most specific, so its style will take precedence if class and type classed with ID.
- You can combine selector , so the highest number will take precedence
#num .cili .love {
color: red;
}
1-2-0
#num .cili {
color: blue;
}
1-1-0
Color will still be black
- You can have two class for each element, separated by one space.
<p class="btn btn-success"> </p>
Comments
Post a Comment