스타일을 재정의하고 CSS에서 상속을 방지하는 방법은 무엇입니까?

Question

저는 프로젝트에서 일하고 있으며 순수한 HTML과 CSS를 사용하여 페이지를 만들었습니다. 3 개의 다른 스타일 시트를 사용 했으므로 페이지가 반응 형이되기를 바랍니다. 하나는 2000px 이상의 폭, 하나는 901px에서 1999px까지, 다른 하나는 900px보다 작은 폭을위한 것입니다. 너비가 900px 이하일 때 2000px 및 1999px 스타일 시트의 일부 요소를 숨기고 싶지만 숨기고 싶지 않은 중첩 요소가 일부 포함되어 있습니다.

<div class=”parent-element”> 
    <div class=”nested-element”> 
    </div> 
</div> 

나는 "부모 요소"클래스를 숨길 수있는 다음과 같은 CSS를 사용했지만, 그것은 또한 "중첩 된 요소"는 "중첩 된 요소"를 얻는 방법

.parent-element { 
    display: none; 
} 

을 숨 깁니다 "부모 요소"클래스가없는 클래스 백? 900px 스타일 시트가 다른 두 스타일 시트에서 모든 스타일을 상속,

나는이 코드를 사용했습니다 그것은 또한

.nested-element { 
    display: block; 
} 

작동하지 않습니다, 어떻게 그것을 방지하기 위해?

Answer 1

부모 요소를 숨기고 중첩 된 요소를 표시 할 수 없습니다.

some tricks to deal with it 할 수도 있지만 그게 전부입니다.

Answer 2

.nested-element은 .parent-element의 하위 항목입니다. 부모를 표시하지 않도록 설정하면 그 안에 포함 된 모든 항목도 표시되지 않습니다. 요소가 표시되지 않습니다

<div class="parent-element"> 
</div> 
<div class="nested-element"> 
</div> 

Answer 3

경우, 그 후손이 표시 될의 원인이 할 수있는 방법이 없습니다 : 이에 대한 해결 방법은 .nested-element이 .parent-element의 아이가 더 이상 있도록 HTML을 변경하지 않는 것입니다. 이것은 상속과는 아무런 관련이 없습니다.

부모를 visibility: hidden으로 설정하고 자식을 visibility: visible으로 설정할 수 있지만 부모가 여전히 공간을 차지하게됩니다.

어느 당신의 HTML 구조 조정 또는 .nested-element의 형제 대신 부모의에 display: none 설정

아마 더 좋은 방법이 될 것입니다.

Answer 4

마찬가지로 알바로 (Alvaro)는 부모를 숨기지 않고 중첩 된 것을 보여줍니다. 당신이

<div class=”block-element”> 
    <div class=”parent-element”></div> 
    <div class=”nested-element”></div> 
</div>