호버링에 대한 CSS의 특수성

Question

나는 CSS의 특수성 문제가 있습니다.

'청구서 없음'이있는 경우 <td> 스타일을 다른 색상으로 바꿔서 if 문으로 스타일을 설정합니다. 청구서가없는 경우 스타일은 style = "id=\"no-bills\"";입니다. 나는 이것을 css와 함께 사용할 수있게되었다. 이제 사용자가 그 위에 마우스를 가져다 대면 배경이 빨간색으로 바뀌기를 원합니다. 그래서 CSS를 수정하고 #bill-list #no-bills td:hover을 추가했습니다. 여기에 td:hover이 있으니 추가로 특이성을 추가 할 수 있습니다. 불행히도, 이것은 작동하지 않습니다 (배경은 동일하게 유지됩니다).

<table id="bill-list"> 
<thead> 
    <tr> 
     <% for (int i=0; i<vecHeader.size(); i++) { %> 
      <th><%=vecHeader.get(i) %></th> 
     <% } %> 
    </tr> 
</thead> 

<tbody> 
    <% int uniqueId = 0; 
     for (int i=0; i < vecValue.size(); i++) { 
     boolean hasBills = true; 
     String style = ""; 
     if (vecBills.get(i) == null || vecBills.get(i).size() == 0) { 
      hasBills = false; 
      style = "id=\"no-bills\""; 
     } 
     %> 
     <tr id="bill<%=i%>" onclick="javascript:showBillDetails(<%=i%>)"> 
      <% for (int j=0; j < vecHeader.size(); j++) { 
       prop = (Properties)vecValue.get(i); 
       %> 
       <td <%=style%>><%=prop.getProperty((String)vecHeader.get(j), "&nbsp;") %>&nbsp;</td> 
      <% } %> 
     </tr> 
... 
... 

누구나 어떤 아이디어가 :

#bill-list 
{ 
    font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif; 
    font-size: 12px; 
    /*margin: 45px;*/ 
    width: 100%; 
    text-align: left; 
    border-collapse: collapse; 
} 
#bill-list th 
{ 
    font-size: 13px; 
    font-weight: normal; 
    padding: 8px; 
    background: #b9c9fe; 
    border-top: 4px solid #aabcfe; 
    border-bottom: 1px solid #fff; 
    color: #039; 
} 
#bill-list td 
{ 
    padding: 8px; 
    background: #e8edff; 
    border-bottom: 1px solid #fff; 
    color: #669; 
    border-top: 1px solid transparent; 
} 
#bill-list tr:hover td 
{ 
    background: #d0dafd; 
    color: #339; 
} 

#bill-list #bill td 
{ 
    background: white; 
} 

#bill-list #no-bills 
{ 
    background: #FFCC99; 
} 
#bill-list #no-bills td:hover 
{ 
    color: orange; 
    background: red /*#FFCC66*/; 
} 

여기 내 코드 (조각)입니다 :

여기 내 CSS입니까?

Answer 1

HTML 코드를 생성하는 코드가 아닌 게시해야합니다. 여기서는 관련이 없습니다.

첫 번째 문제 : 같은 페이지에 2 no-bills ID를 사용할 수 없습니까?

문제 : 의 자손을 #no-bills의 스타일로 지정하려고합니다. 후자는 구세대가 아니라 똑같은 td입니다! #bill-list #no-bills:hover의 스타일을 지정해야합니다. td이 표시된 것 같습니다.

Answer 2

는 ID를 통해 클래스를 사용해야합니다,

#bill-list #no-bills:hover 

대신

#bill-list #no-bills td:hover 

여러 노 청구서가없는 경우

보십시오.