2012-03-11 3 views
1

이것은 내부 깊은 중첩 :CSS 코드가 어떻게 보이는지 다른 요소

enter image description here

그리고 즉 <div class="Comment">...</div>, 어떻게 그것을 스타일 않습니다 강조 표시된 요소의 테두리에 원하는 CSS 사용?

참고 : 'Comment'라는 클래스가 있는지 확인하십시오. 강조 표시된 요소와 부모 요소 모두에서 사용됩니다. 그래서, 아마도 이것이 약간 까다로운 이유일까요?

나는 아래 CSS 코드를 시도해 보았다.

.DataList .Item .comment, .DataList .Comment .comment, 
.DataList .FirstComment .comment, .DataList .Mine .comment { 
    border:1px solid #666; 
    padding:10px; 
    border-radius:3px; 
     -moz-border-radius:3px; 
     -webkit-border-radius:3px; 
} 

.DataList .Item div.comment, .DataList .Comment div.comment, 
.DataList .FirstComment div.comment, .DataList .Mine div.comment { 
    border:1px solid #666; 
    padding:10px; 
    border-radius:3px; 
     -moz-border-radius:3px; 
     -webkit-border-radius:3px; 
} 

내가 뭘 잘못하고 있니? 누군가가이 작은 수수께끼를 푸는 데 도움이되기를 바랍니다. 감사.

+2

div. 의견을 말하지 않습니까? – j08691

+0

@ j08691 나는 꽤 바보 같았다. 필자는 항상 .comment와 div.comment를 테스트하고 있었고,이 사건을 알지 못했다. 대신'.Comment' 또는'div.Comment.' LOL!을 타이핑해야합니다. –

답변

4

먼저 극단적 인 특수성으로 스타일을 지정하지 마십시오 (상위/요소 선택기 추가). 이런 식으로 그냥 .Comment - 을 사용할 수 있습니다. 대소 문자를 구분합니다. 스타일 오버라이드 (override) 또는 이름은 같지만 서로 다른 "컨텍스트"(당신이 .Comment와 목록 항목을하고 .Comment와 DIV 자식처럼) 더 높은 특이성을 사용할 때, 그건의 선택기를하는 경우

(부모를 추가/selector의 요소) div.Comment, .Item .Comment

+0

오, 젠장! 어떻게 그럴 수 있니?! 나는 잘못된 케이스를 사용하고 있다는 것을 알지 못했습니다. 나를 고쳐 주셔서 고마워. :) –

관련 문제