새로 정의 된 CSS 규칙을 적용하는 데 문제가 있습니다.

Question

CSS 규칙 적용 방법을 이해하는 데 문제가 있습니다. 사업부에서 단락

, 나는이 새로 정의 된 규칙을 적용 할 :

.imgDescription { 
    position: absolute; 
    right: 10px; 
    color: #000; 
} 

을하지만, 단락이 여전히 이전의 규칙에 의해 스타일입니다 :

.dark-wrapper .inner p { 
    font-family: 'Open Sans'; 
    font-size:14px; 
    color:#CCC; 
} 

것은 나도 몰라 이 문제를 해결하는 방법.

Answer 1

스타일에 !important을 추가 할 수 있습니다.

.imgDescription { 
    position: absolute !important; 
    right: 10px !important; 
    color: #000 !important; 
} 

또는 .dark-wrapper .inner p part의 아래 .imgDescription을 정의합니다. 내가 아는 한 CSS 정의는 정의에서 순서에 따라 가중치가 적용됩니다. 여기에 내가 틀렸다면 나를 바로 잡아주세요 ...

Answer 2

CSS 규칙이 어떻게 작동하는지, 즉 계단식과 특이성을 이해해야합니다.

당신은 읽을 수 있습니다 : 귀하의 경우 http://www.w3.org/TR/CSS2/cascade.html

을, 당신은 이전에 정의 된 규칙을 무시 있도록 새로운 규칙이 더 구체적으로 확인해야합니다. 당신의 예에서

, 당신이 필요로하는 것 :

.dark-wrapper .inner p { 
    font-family: 'Open Sans'; 
    font-size:14px; 
    color:#CCC; 
} 

.dark-wrapper .inner p.imgDescription { 
    position: absolute; 
    right: 10px; 
    color: #000; 
} 

.dark-wrapper .inner p는 0,0,2,1

.dark-wrapper .inner p.imgDescription의 특이성을 가지고하는 것은 높은 0,0,3,1의 특이성을 가지고 우선권이 주어집니다.