상속 된 CSS를 피하십시오

Question

나는 동적으로 CSS를 다른 요소가 들어있는 HTML을로드하는 div가 있습니다.이 div는 부분보기에 있으며 해당 CSS는 div의 요소 CSS를 재정의합니다.

부분보기에서 우리는 CSS table{border:none;}을 설정했지만 div 요소에서 테이블 요소에 정의 된 바와 같이 표 CSS를 표시하려고합니다.

어떻게하면됩니까?

감사합니다.

Answer 1

부분보기에서 CSS를 작성하는 방식을 변경하십시오. 그런 다음 다른 장소에 table을 무시하지 않을

.partial-view-div table { 
    border: solid 1px blue 
} 

:

대신

그냥 table {border: none;}를 작성하고 모든 테이블을 무시, 당신은 같은 것을해야한다.

또한 Read up on CSS Specificity score입니다.

Answer 2

하나의 해결 방법은 하위 선택자를 사용하는 것입니다.

table td { 
 
    border: 1px solid black; 
 
} 
 

 
.partial > table td { 
 
    border: none; 
 
}

<div class="partial"> 
 
    <table> 
 
    <tr> 
 
     <td>1</td> 
 
     <td>2</td> 
 
    </tr> 
 
    </table> 
 
    <div> 
 
    <table> 
 
     <tr> 
 
     <td>1</td> 
 
     <td>2</td> 
 
     </tr> 
 
    </table> 
 
    </div> 
 
</div>

https://developer.mozilla.org/en-US/docs/Web/CSS/Child_selectors