html - CSS表类正在影响类外的所有表

我正在尝试使用下面的代码创建一个包含响应表的新页面。我已将代码放在其自己的“可重载”类中，但由于某种原因，它影响了整个站点中的所有表（即使不是任何类的表）。我似乎找不到原因。任何帮助，将不胜感激，谢谢！

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>

最佳答案

这样的选择器：

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

指着：

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

因此，列表中的第一个选择器具有您的类resptable。其他指向每个thead，tbody，th，td，tr元素（没有您的类resptable）。
还有一点是，您table具有resptable类。因此，table不在.resptable中，但table是.resptable：

table.resptable

  我相信您正在尝试写另一个：

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

关于html - CSS表类正在影响类外的所有表，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/33329969/