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>