단일 표 셀 스타일링

Question

단일 표 셀의 스타일을 지정하는 데 문제가 있습니다.

<style> 
#bltable { border-collapse:collapse; width:575px; 
    -moz-user-select:none;} 
#bltable tr.row1 {background-color:#eff3f7;} 
#bltable tr.row2 {background-color:#ffffff;} 
#bltable tr.fotm td {background-color:#ffffd9;} 
#bltable td.op td {background-color:#f2f2c3;} 
</style> 
<table id="bloodlines"> 
    <tr class="row1"> 
     <th>1</th> 
     <th>2</th> 
     <th>3</th> 
     <th>4</th> 
    </tr> 
     <tr class="row2"> 
     <td>sup</td> 
     <td>sup</td> 
     <td class="op">sup</td> 
     <td>sup</td> 
    </tr> 
    <tr class="fotm"> 
     <td>sup</td> 
     <td>sup</td> 
     <td>sup</td> 
     <td>sup</td> 
    </tr> 
</table> 

당신이 표는 두 가지 색상 (ROW1 및 ROW2) 각 행을 변경하는 (checkboard 스타일)가 볼 수 있듯이 : 여기에 내 문제를 설명하는 예제 코드입니다. 표에는 세 번째 색이 추가 된 "달 맛"행이 있습니다. 마지막으로 테이블에는 네 번째 색상이 될 단일 td 클래스 = "op"가 있습니다.

내가 겪고있는 문제는 row1, row2 및 fotm 클래스가 "op"클래스 색상을 무시하고 네 번째 색상이 표시되지 않는다는 것입니다. 이 기능을 만들기 위해 다르게 작성할 수 있습니까?

나는 시도했다 :

#bltable tr.row1 

다음 있지만 (결국 "TD"없이) 나는 X가 상속되지 않습니다 "로보고, 전혀 행 색상을 얻을 그것은이 둘러싸는 태그에 적용됩니다. td.op 그 부분의주의를 기울여야한다 주어진

#bltable td.op td {} 

의 말에 "TD"

또한, 자사의 필요에 거세한 숫양 임 확실하지 여분을 가지고 ".. 원칙적으로해야뿐만 아니라

.op {} 

충분합니까?

아이디어가 있으십니까?

Answer 1

당신은 당신이 개 td들했다이

#bltable tr td.op {background-color:#f2f2c3;}

첫 번째에 .op에 CSS를

#bltable td.op td {background-color:#f2f2c3;}

이 줄을 변경해야합니다.

예 : http://jsfiddle.net/jasongennaro/LdSM3/

Answer 2

규칙이 잘못되었습니다. 그것은해야한다 :

#bltable td.op {background-color:#f2f2c3;} 

또는

#bltable tr td.op {background-color:#f2f2c3;} 

Answer 3

당신은이를 사용할 수 있습니다

bltable td.op {background-color:#f2f2c3;} 

, 오른쪽 추가 "TD"가 필요하지 않습니다. 그게 당신이 찾고있는 선택하지 그래서

Answer 4

귀하의 <td class="op"> 요구는, 어떤 TD의 td.op 아래를 선택할 것 #bltable td.op {background-color:#f2f2c3;}하지 #bltable td.op td {background-color:#f2f2c3;}

http://jsfiddle.net/AlienWebguy/QvdsQ/

Answer 5

#bltable td.op td와 스타일을 지정할 수 있습니다.

기본적으로 specificity problem을 실행 중입니다. row1 및 row2 선택기는 셀렉터에 HTML 요소가 하나 더 있으므로 선택기 td.op에 비해 더 구체적이고 "승리"합니다. 위

#bltable tr.row1 td {background-color:#eff3f7;} 
#bltable tr.row2 td {background-color:#ffffff;} 
#bltable tr.fotm td {background-color:#ffffd9;} 
#bltable tr td.op {background-color:#f2f2c3;} 

, 당신은 ID, 클래스와 요소, 각 선택에 대한 요소가 :이 적용됩니다, 그래서 당신은 다른 사람보다 당신의 td.op 선택은 특정 (또는 더 구체적으로) 확인해야합니다 . 그것은 당신을 위해 그것을해야합니다.

Answer 6

중첩 된 TD가 없으므로 td.op 이후의 td가 잘못되었습니다. 대신 td.op 뒤에! important를 추가하면됩니다.

(스마트 폰으로이 글을 작성 했으므로 테스트 할 수 없습니다. 죄송합니다)