CSS 계층에서 상위 스타일 제거

Question

작은 화면에서 볼 때 사이트를 개선하기 위해 CSS 클래스를 재정의하려고합니다. 예 :

내 파일

:

@media only screen and (max-width: 480px) 
body.layout-mode-responsive .fp-roksprocket-showcase.rt-block { 
margin: 0; 
} 

코어 파일 :

.fp-roksprocket-showcase.rt-block { 
margin: 0; 
padding: 100px 0 80px 0; 
} 

이 방법은, 내가 대체 싶어 DIV에가, 코어 파일의 패딩을 받고있다 ... 이 방법이 내가 원하는 파일에 패딩 스타일을 넣을 수는 없습니다. 이 스타일을 "제거"해야합니다!

어떻게하면됩니까?

Answer 1

CSS 스타일링이 발생하는 방법은 모든 하위 요소에 의해 부모 스타일이 자동으로 상속되며 모든 상위 요소를 재정의하려면 자식 요소 CSS 스타일에서 지정해야합니다.

우리가 모든 자식 요소는 CSS 스타일 color: red있을 것이다

.parent{color:red;} 

있다고 가정합시다. 당신이 당신의 경우 color:black

이제 자식 요소의 CSS 스타일 지정해야 다음 자식 요소에서 재정의 할 경우 다음 아이에 그냥 않는 원하지 않는 경우, 부모 스타일링 padding: 100px 0 80px 0;이 padding: 0px;

는 그래서이

@media only screen and (max-width: 480px){ 
    body.layout-mode-responsive .fp-roksprocket-showcase.rt-block { 
    margin: 0;padding :0; 
    } 
} 

Answer 2

당신이 패딩을 넣어 제거하려면 : padding: 0

Answer 3

당신이 당신의 미디어 쿼리에서 중괄호 누락 나타납니다.

당신은이 : 당신이해야하는 것은

@media only screen and (max-width: 480px) 
body.layout-mode-responsive .fp-roksprocket-showcase.rt-block { 
margin: 0; 
} 

:

@media only screen and (max-width: 480px){ 
    body.layout-mode-responsive .fp-roksprocket-showcase.rt-block { 
    margin: 0; 
    padding: 0; 
    } 
} 

나는이 도움이되기를 바랍니다.

Answer 4

변경이에

@media only screen and (max-width: 480px) 
    body.layout-mode-responsive .fp-roksprocket-showcase.rt-block { 
    margin: 0; 
} 

는 :

@media only screen and (max-width: 480px) 
    body.layout-mode-responsive .fp-roksprocket-showcase.rt-block { 
     padding: 0; 
    } 
} 

당신은 제대로 너무 당신의 선택을 닫습니다 잊어 버렸습니다.

Answer 5

당신은 initial 키워드를 찾고있는 것처럼 보일 것입니다. MDN documentation을 확인하십시오.

initial 키워드는 CSS 사양에 따라 상속 된 스타일을 기본 스타일로 다시 설정합니다. 그러나 이것은 CSS3 이후에만 지원되며 Internet Explorer에 대한 대안을 추가해야하는 것처럼 보입니다.

비슷한 unset 키워드는 브라우저 호환성 측면에서 훨씬 나빠지지만 원하는 것에 더 잘 어울릴 수 있습니다.

관련 정보는 this question을 확인하십시오.

---

참고 : 답변의 대부분은 여기에 아스 커는 패딩을 제거하고 싶은 생각합니다. 묻는 사람이 원하는 것은 부모 스타일을 없애는 것입니다 (스타일이 처음에 언급되지 않은 경우 브라우저가 넣을 패딩을 복원).