2009-05-11 13 views
6

잘 나는 2 CSS는 layout.cssCSS 스타일을 덮어 쓰기 하시겠습니까?

Table.infoBox tr td table tr td 
{ 
    padding: 0px; 
    border: 0px; 
} 

ATJournal.css

table.ATJMainTable tr td 
{ 
    border: 1px solid black; 
    padding: 3px; 
} 

<link href="Styles/layout.css" rel="stylesheet" type="text/css" /> 
<link href="Styles/ATJournal.css" rel="stylesheet" type="text/css" /> 

포함하고 우리는

<Table class="infoBox"> 
    <tr> 
     <td> 
     <table class="ATJMainTable"> 
      <tr> 
       <td> 
        some text! 
       </td> 
      </tr> 
     </table> 
    </tr> 
</table> 

는 이유는 무엇입니까이 표를 가지고 layout.css는이 경우 ATJournal.css를 덮어 씁니까? 여전히 ATJournal.css가 덮어 씁니다 CSS의 순서가 "layout.css"를 포함하고 내가 변경하더라도

....

답변

11

선택기가 더 구체적입니다.

Table.infoBox tr td table tr td 

은 infobox로 분류 된 표의 내부에있는 표 안의 스타일링 셀입니다. !

table.ATJMainTable tr td 

는 특이성을 무시

당신은 사용할 수 ATJMainTable

로 분류 표 안에 중요한 TD 세포를 스타일링한다, 또는 당신은 같은 것을 할 수있는 :

table.infoBox tr td table.ATJMainTable tr td 

구체적으로 그 부분을 무시하려면를 .

또는 infobox 선택기를 덜 구체적으로 줄일 수 있습니까?

3

그것은보다 구체적인 선택입니다.

here을 참조하십시오.

10

!important을 사용하여 실제로 어떤 규칙이 승리하는지 지정할 수 있습니다.

table.ATJMainTable tr td 
{ 
    border: 1px solid black !important; 
    padding: 3px !important; 
} 

이것은 기본적으로이 규칙은 가장 중요한 규칙이며 모든 사람이이 규칙에 찬성 케스케이드 될 것인지를 확인해야 브라우저를 알려줍니다.

경고 : 너무 많이 사용하면 문제를 일으킬 수 있으므로 문제가 될 수 있으므로이 내용을주의해서 사용해야합니다.

+3

이 구문을 모두 함께 사용하지 않는 것이 좋습니다. 그것을 사용하는 것은 나쁘지 않지만 당신이 그것을 피할 수 있다면 당신은해야합니다. –

+4

이 질문에 대한 답변이 아닙니다. 그것은 질문에 영감을 준 문제에 대한 해결책 일지 모르지만 그 문제는 가난합니다. – Jasper

+0

@Jasper 지금 몇 년 후 내가이 대답은 문제를 해결하는 올바른 방법이 아니므로 내가 CSS의 큰 이해를 가지고 내가 허용 대답을 변경! – Peter