CSS Tutorial For Beginners #11-15
Inheritance
body에 색상을 주면 그안에 모든 것이 같은 색상으로 됨.
div에 색상을 주면 그안에 있는 것이 색상이 적용됨
Selector Specificity
Confilcts&Casacade
p { color: black;}
p { color: red;} -> This rule wins
#main-content p { color: black;} -> This rule wins (101 point)
p { color: red;} (1 point)
<div id="main-content">
<p>A<strong>B</strong>C</p>
<p class="test">D</p>
</div>
<p>E</p>
#main-content p{
color: red;
}
p{
color: black;
}
.test{
color: green;
}
strong{
color: blue;
}
A, B, C, D, E의 색상은?
The Important Declaration
#main-content p{
color: red;
}
p{
color: black;
}
.test{
color: green !important;
}
strong{
color: blue;
}
Targeting Multiple elements
p, span, a, li 태그 모두에 같은 내용을 적용시키기 위해서 각각 쓰는 것이 아니라
comma로..
p, span, a, li{
color: red;
}
Descendant Selectors
스페이스로 선택함.
#main-content p{
color: red;
}
<div id="main-content">
<p>A</p>
</div>