CSS表類正在影響類之外的所有表

Question

我試圖使用下面的代碼獲取包含響應表的新頁面。我已經將代碼放在自己的類中，但由於某些原因，它會影響整個站點中的所有表（即使不在任何類中）。我似乎無法找到原因。任何幫助將不勝感激，謝謝！

的CSS -

/* 
Generic Styling, for Desktops/Laptops 
*/ 
.resptable table { 
    width: 100%; 
    border-collapse: collapse; 
} 
/* Zebra striping */ 
.resptable tr:nth-of-type(odd) { 
    background: #eee; 
} 
.resptable th { 
    background: #333; 
    color: white; 
    font-weight: bold; 
} 
.resptable td, th { 
    padding: 6px; 
    border: 1px solid #ccc; 
    text-align: left; 
} 


/* 
Max width before this PARTICULAR table gets nasty 
This query will take effect for any screen smaller than 760px 
and also iPads specifically. 
*/ 
@media 
only screen and (max-width: 760px), 
(min-device-width: 768px) and (max-device-width: 1024px) { 

    /* Force table to not be like tables anymore */ 
    .resptable table, thead, tbody, th, td, tr { 
     display: block; 
    } 

    /* Hide table headers (but not display: none;, for accessibility) */ 
    .resptable thead tr { 
     position: absolute; 
     top: -9999px; 
     left: -9999px; 
    } 

    .resptable tr { border: 1px solid #ccc; } 

    .resptable td { 
     /* Behave like a "row" */ 
     border: none; 
     border-bottom: 1px solid #eee; 
     position: relative; 
     padding-left: 50%; 
    } 

    .resptable td:before { 
     /* Now like a table header */ 
     position: absolute; 
     /* Top/left values mimic padding */ 
     top: 6px; 
     left: 6px; 
     width: 45%; 
     padding-right: 10px; 
     white-space: nowrap; 
    } 

    /* 
    Label the data 
    */ 
    .resptable td:nth-of-type(1):before { content: "First Name"; } 
    .resptable td:nth-of-type(2):before { content: "Last Name"; } 
    .resptable td:nth-of-type(3):before { content: "Job Title"; } 
    .resptable td:nth-of-type(4):before { content: "Favorite Color"; } 
    .resptable td:nth-of-type(5):before { content: "Wars of Trek?"; } 
    .resptable td:nth-of-type(6):before { content: "Porn Name"; } 
    .resptable td:nth-of-type(7):before { content: "Date of Birth"; } 
    .resptable td:nth-of-type(8):before { content: "Dream Vacation City"; } 
    .resptable td:nth-of-type(9):before { content: "GPA"; } 
    .resptable td:nth-of-type(10):before { content: "Arbitrary Data"; } 
} 

這裏是HTML：

<table class="resptable"> 
    <thead> 
    <tr> 
     <th>First Name</th> 
     <th>Last Name</th> 
     <th>Job Title</th> 
    </tr> 
    </thead> 
    <tbody> 
    <tr> 
     <td>James</td> 
     <td>Matman</td> 
     <td>Chief Sandwich Eater</td> 
    </tr> 
    <tr> 
     <td>The</td> 
     <td>Tick</td> 
     <td>Crimefighter Sorta</td> 
    </tr> 
    </tbody> 
</table> 

Answer 1

1. 這樣的選擇：

   .resptable table, thead, tbody, th, td, tr 
   

   點：

   .resptable table, 
   thead, 
   tbody, 
   th, 
   td, 
   tr 
   

   所以，只要列表中的第一個選擇器有你的班級resptable。其他指向每個thead,tbody,th,td,tr元素（沒有你的類resptable）。

2. 還有一點就是你table有resptable類。所以，table不.resptable，但table爲.resptable：

   table.resptable 
   

我相信你試圖寫另一個問題：

table.resptable, 
.resptable thead, 
.resptable tbody, 
.resptable th, 
.resptable td, 
.resptable tr