DIV의 이미지에 대한 CSS IMG 스타일을 제거하십시오.

Question

특수 DIV의 이미지에 대해 다른 IMG 스타일을 설정하고 싶습니다. 여기에 그럼 내 구조

<div class=content> 
    <div class=contact> 
    </div> 
</div> 

이다 나는 내가 달성하고자하는 것은 기업에게 연락 DIV에 대해 다른 IMG 스타일을 설정하는 것입니다이

div.content img { 
    -webkit-border-radius:10px; 
    -moz-border-radius:10px; 
    -khtml-border-radius:10px; 
    border-radius:10px; 
    padding:5px; 
    margin-right:15px; 
    margin-top:8px; 
    box-shadow:0 0px 25px 0px rgba(0, 0, 0, 0.3), 0 0 200px 0px rgba(255, 255, 255, 0.3); 
    -webkit-transform: scale(1.0); 
    -moz-transform: scale(1.0); 
    -ms-transform: scale(1.0); 
    -o-transform: scale(1.0); 
    transform: scale(1.0); 
    -webkit-transition-timing-function: ease-out; 
    -webkit-transition-duration: 500ms; 
} 

같은 콘텐츠 사업부에 대한 IMG 스타일을 가지고 있지만 그것은 작품을 나던 .

div.contact img 
{ 

} 

내가 뭘 잘못하고있는가?

감사합니다.

Answer 1

만든 당신을위한 바이올린 어떤 이미지를 의미한다. 이게 당신이 찾고있는 것입니까 http://jsfiddle.net/4DpBV/1/. 당신은`div.contact의 img` 첫 번째 선택 이후에로드 된 경우 작동합니다 > 재산

.content { 
    -webkit-border-radius:10px; 
    -moz-border-radius:10px; 
    -khtml-border-radius:10px; 
    border-radius:10px; 
    padding:5px; 
    margin-right:15px; 
    margin-top:8px; 
    box-shadow:0 0px 25px 0px rgba(0, 0, 0, 0.3), 0 0 200px 0px rgba(255, 255, 255, 0.3); 
    -webkit-transform: scale(1.0); 
    -moz-transform: scale(1.0); 
    -ms-transform: scale(1.0); 
    -o-transform: scale(1.0); 
    transform: scale(1.0); 
    -webkit-transition-timing-function: ease-out; 
    -webkit-transition-duration: 500ms; 
    border:2px solid; 
    height:50px; 
} 

.content > .contact { 
    -webkit-border-radius:10px; 
    -moz-border-radius:10px; 
    -khtml-border-radius:10px; 
    border-radius:10px; 
    padding:5px; 
    margin-right:15px; 
    margin-top:8px; 
    box-shadow:0 0px 25px 0px rgba(0, 0, 0, 0.3), 0 0 200px 0px rgba(255, 255, 255, 0.3); 
    -webkit-transform: scale(1.0); 
    -moz-transform: scale(1.0); 
    -ms-transform: scale(1.0); 
    -o-transform: scale(1.0); 
    transform: scale(1.0); 
    -webkit-transition-timing-function: ease-out; 
    -webkit-transition-duration: 500ms; 
    border:2px solid red; 
    height:10px; 
} 

Answer 2

계단식 스타일 시트는 모든 하위 요소에 대한 이전 CSS 계단식을 의미합니다.

div.content img은 "클래스 내용이있는 div 안에있는 모든 img-tag"를 의미합니다.

formers img-tag에 지정자를 추가하거나 후자에 각 속성을 적극적으로 덮어 쓰거나 재설정하지 않으려면 지정자를 추가해야합니다.

Answer 3

당신은 >

그래서 당신의 CSS를 변경 직접 자식 연산자를 사용할 수 있습니다

div.content > img { 
    -webkit-border-radius:10px; 
    -moz-border-radius:10px; 
    -khtml-border-radius:10px; 
    border-radius:10px; 
    padding:5px; 
    margin-right:15px; 
    margin-top:8px; 
    box-shadow:0 0px 25px 0px rgba(0, 0, 0, 0.3), 0 0 200px 0px rgba(255, 255, 255, 0.3); 
    -webkit-transform: scale(1.0); 
    -moz-transform: scale(1.0); 
    -ms-transform: scale(1.0); 
    -o-transform: scale(1.0); 
    transform: scale(1.0); 
    -webkit-transition-timing-function: ease-out; 
    -webkit-transition-duration: 500ms; 
} /* Will only apply for images inside content div and not contact div */ 

div.contact > img { 
    /* This styles will only be applied to images in contact div */ 
} 

div.content img 내부 div.contact