중첩 된 요소의 CSS 및 스타일 재정의

이것은 다른 질문에서 나온 것인데 here이라고 물었습니다.하지만 아마도 "모범 사례"접근법이있는 것 같습니다.중첩 된 요소의 CSS 및 스타일 재정의

웹 사이트를 디자인 할 때 디자이너는 대부분 웹 사이트 내의 모든 요소에 대해 일련의 일반 스타일을 조합합니다. (Divs/Spans/H1/H2s의 텍스트 용 표준 폰트)

테이블의 경우, 기본 sitewide 테두리와 정렬을 정의 할 수 있습니다.

Table 
{ 
    border: dashed 1px #333333; 
    padding: 2px; 
}

는 테이블 내에서 테이블이 그러나 경우 (RSolberg의 예에서, AJAX를 캘린더 데이터 그리드 내에서)를 다음 부모 & 중첩 된 테이블 모두 모두 이러한 스타일을 상속합니다. (이것이 계단식이라고 불리는 이유라고 가정하십시오.)

제 질문은 하위 요소에도 상속받지 않고 대부분의 요소에 스타일을 적용하는 가장 좋은 방법입니다.

적용한 스타일링을 취소하는 재정의 기능을 제공해야합니다.

Table 
{ 
    border: dashed 1px #333333; 
    padding: 2px; 
} 

Table Table 
{ 
    border: solid 0px #000000; 
    padding: 0px; 
}

출처

2009-04-21 Eoin Campbell

나는이 두 가지 솔루션이 모두 작동한다는 것을 알고 있습니다. 나는 Html/CSS 디자이너의 관점에서 베스트 프랙티스가 무엇인지 궁금 할 뿐이다. 나는 "N 레벨을 깊게하고 멈추십시오"라고 말하는 마법의 CSS 플래그가 없다고 가정합니다. –

이 같은 HTML이있는 경우 :.


<html> 
    ... 
    <body> 
    <div> 
     <div> 
     <div> 
    <div> 
    </body> 
</html>

에만 테두리를 얻을하지 않습니다 아이 선택기 (

>) like this:

 body > div { border:solid 1px orange; }

The nested div를 사용하여 body 요소의 자식 인 div에 스타일을 적용 할 수

자세한 내용을 보려면 다음을 방문하십시오. http://www.w3.org/TR/CSS2/selector.html#child-selectors

Internet Explorer 6은 rt the 자식 선택자.

출처

2009-04-21 18:43:20 knut

아하 이것은 내가 염두에 두었던 것과 더 가깝습니다. 그래서 "최상위 사이트 스타일"을 지정할 수 있습니다. 이러한 요소의 내용을 망칠 걱정없이 사이트의 주요 구조에 적용됩니다. 고마워요. –

예. 테이블 테이블 규칙은 more specific이기 때문에 '테이블'규칙보다 우선합니다. 당신이 묘사 한 것은 가장 바깥 쪽 테이블을위한 하나의 스타일과 내부 테이블을위한 또 다른 스타일을 갖는 가장 좋은 방법입니다 - 어느 테이블도 더 많은 의미 론적 선택자를 사용할 수있는 클래스 나 ID를 가지고 있다고 가정하지 마십시오.

실제로이 기술을 목록과 함께 사용해야 할 가능성이 더 큽니다.

ol { list-style: upper-roman } 
ol ol { list-style: upper-alpha } 
ol ol ol { list-style: lower-roman } 
ol ol ol ol { list-style: lower-alpha }

출처

2009-04-21 18:30:48

외부 테이블에 클래스 또는 ID를 추가 : 당신은 당신이 원하는 테이블을 가정 HTML에 아이디 나 클래스를 추가 할 수없는 경우

<style type="text/css"> 
.outer {border: dashed 1px #333333;} 
</style> 
</head> 
<body> 
    <table class="outer"> 
    <tr><td>before inner table. 
    <table> 
    <tr> 
    <td>Inside inner table.</td> 
    </tr> 
    </table> 
    After inner table. 
    </td> 
    </tr> 
    </table>  
</body>

그것을 here

를 참조하십시오 스타일이 다른 테이블에없는 경우 어떤 요소가 하위 요소인지 지정하여 스타일을 지정할 수 있습니다.

div > table {border: dashed 1px #333333;}

그것을보십시오 here

비록 그 선택기가 IE7에서만 구현 되었기 때문에 IE6을 지원해야한다면 질문에서 override 메소드를 사용해야합니다.

출처

2009-04-21 18:36:26

샘이 항상 실현 가능한 것은 아닙니다. ID/Classnames를 추가해야 할 때 HTML을 쏟아내는 서버 측 컨트롤을 다루는 특정 시나리오가 있습니다. ID/클래스 이름을 추가하면 OnRender 코드를 작성하여이를 집어 넣을 수 있습니다. –

에 필터링 할 # IDs/.ClassNames가 없을 때 다른 중첩 수준에서 재정의를 제공하는 것이 가장 좋습니다. HTML에 추가하지 않고도 할 수있는 방법이 추가되었지만 IE6이 사용되지 않을 때까지 우리가 표준 연습이라고 부를 수 있기까지 어느 정도 시간이 걸릴 것입니다. –

본인의 초기 아이디어에 동의하지만 상황에 따라 다릅니다.

항상 기본 규칙을 만들고 해당 규칙에 대한 예외가있는 스타일 시트에 추가하십시오.

예를 들어 표 내의 표가 확실히 동일한 스타일을 적용 할 필요가 없다고 확신하는 경우 "표 테이블"선택자를 사용하여 스타일을 설정하십시오. 그러나 한 번만 발생하면 부모 테이블에 클래스를 설정하고 "table.parent table"행을 따라 "table table"선택기를 수정하십시오.

그러나 "parent"는 요소와 같은 요소를 설명하는 이름으로 변경해야합니다 (예 : 캘린더). 스타일을 변경하면 더 이상 의미가 없기 때문에 특정 스타일 뒤에 클래스 이름을 지정하지 않아야합니다.

출처

2009-04-21 18:54:12

중첩 된 요소의 CSS 및 스타일 재정의

답변

관련 문제