移除Paritcular Html元素的CSS類

我已將一個CSS類添加到table元素。然後我在父表中添加了一個子表。問題是父表的CSS類也會影響子表。我不希望發生這種情況。

如何確保應用於父表的CSS不會影響子表？

我的CSS如下：

.gtable { 
    width: 100%; 
} 
.gtable th { 
    padding: 5px 10px; 
    text-align: left; 
} 
.gtableTH { 
    text-align: center; 
} 
.gtable thead tr { 
    border: 1px solid #CCCCCC; 
    color: #333333; 
} 
.gtable thead th { 
    background: none repeat scroll 0 0 #C0C0C0; 
} 
.gtable tbody tr:hover td { 
    background-color: #FFFAE3; 
} 
.gtable td { 
    padding: 5px 10px; 
} 
.gtable tbody tr td { 
    border-bottom: 1px solid #EEEEEE; 
} 
.gtable tbody tr:nth-child(2n+1) .gtable thead th { 
    background: -moz-linear-gradient(#FFFFFF, #EFEFEF) repeat scroll 0 0 transparent; 
}

和我的HTML：

<table class="gtable"> 

         <thead> 

          <tr> 

           <th>Drop Down Label</th> 
           <th>Drop Down Values</th> 
          </tr> 

         </thead> 

         <tbody class="ui-sortable"> 

          <tr> 

           <td>Category 1</td> 

           <td> 
            <table> 
             <tbody class="ui-sortable"><tr> 
              <td> 
               Complaint 
              </td> 
              </tr> 
              <tr> 
              <td> 
               Service Request 
              </td> 
              </tr> 
              <tr> 
              <td> 
               Enquiry 
              </td> 
             </tr> 
            </tbody></table> 
           </td> 

           <td> 
            <button class="button small" type="submit">Edit</button> 
           </td> 

          </tr> 

         </tbody> 
        </table>

來源

2011-10-25 ghanshyam.mirani

您可以發佈您的HTML和CSS代碼？我相信你做錯了。 – Ashwin

創建一個與子表匹配並重寫父規則的選擇器。 –

您需要發佈您的代碼，以便我們能夠幫助您 –

不知道沒有你的代碼，但在這裏是用嵌套表兩張表的演示。一個有風格的關閉：http://jsfiddle.net/jalbertbowdenii/7QWQv/

來源

2011-10-25 05:45:18 albert

編輯：從剛剛發佈的代碼，它看起來像問題是，.gtable td（與空格的其他選擇）選擇td任何地方的元素中與gtable類（其中包括子表）。如果您只想選擇第一個表格中的元素，請將類直接放置在這些元素上，或者使用子選擇器，如.gtable > tbody > tr > td。

來源

2011-10-25 05:52:02

使用即時子選擇器> 這意味着CSS屬性將僅應用於左側選擇器的直接後代。

例如

.box1 > img { 
    border:5px; 
}

只<img>直接位於.box1內部的標記將具有5px的邊界。如果他們是任何其他元素中，讓我們說<a><img src=... /></a>他們不會有任何邊界

使用這個CSS爲您例如：

.gtable { 
     width: 100%; 
    } 
    .gtable > th { 
     padding: 5px 10px; 
     text-align: left; 
    } 
    .gtableTH { 
     text-align: center; 
    } 
    .gtable > thead > tr { 
     border: 1px solid #CCCCCC; 
     color: #333333; 
    } 
    .gtable > thead > th { 
     background: none repeat scroll 0 0 #C0C0C0; 
    } 
    .gtable > tbody > tr:hover > td { 
     background-color: #FFFAE3; 
    } 
    .gtable > td { 
     padding: 5px 10px; 
    } 
    .gtable > tbody > tr > td { 
     border-bottom: 1px solid #EEEEEE; 
    } 
    .gtable > tbody > tr:nth-child(2n+1) >.gtable > thead > th { 
     background: -moz-linear-gradient(#FFFFFF, #EFEFEF) repeat scroll 0 0 transparent; 
    }

來源

2011-10-25 05:55:41

在您使用.gtable tbody, .gtable tr, .gtable td, .gtable th你的CSS，這意味着你所申請的CSS所有你的父表中的孩子（tr，td，th）。你應該避免它。

解決方案：
應用另一個類的子表像<table class="childtable"> 和你的CSS，你需要定義CSS的嵌套元素 -
.childtable tbody, .childtable tr, .childtable td, .childtable th等

來源

2011-10-25 05:57:02 Ashwin

移除Paritcular Html元素的CSS類

回答

相關問題