Question

这里我试图仅将css应用于第二个表。

但是在我的网页中我有2个表，如果我将这个css应用于表两张桌子都拿着css。但我想仅将css应用于第二个表。

css代码：

body{
    background:url(aya.jpg);
}

table { 
    color: #333;
    font-family: Helvetica, Arial, sans-serif;
    width: 640px; 
    border-collapse: 
    collapse; border-spacing: 0; 
}

td, th { 
    border: 1px solid black;
    height: 30px; 
    transition: all 0.3s;
}

th {
    background: #757575;
    font-weight: bold;
    color:white;
}

td {
    background: #FAFAFA;
    text-align: center;
}

tr:nth-child(even) td { 
    background: #F2F2F2; 
}   

tr:nth-child(odd) td { 
    background: #E6ECF2; 
}

html代码

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/common-style.css">
<link rel="stylesheet" type="text/css" href="css/button.css">
</head>
<body>
<center>

<table>
<tr>
    <th>One</th>
    <th>Two</th>
    <th>Three</th>
</tr>
<tr>
    <td>Apples</td>
    <td>Carrots</td>
    <td>Steak</td>
</tr>
<tr>
    <td>Oranges</td>
    <td>Potato</td>
    <td>Pork</td>
</tr>
<tr>
    <td>Pears</td>
    <td>Peas</td>
    <td>Chicken</td>
</tr>
</table>


<table class="obd">
<tr>
    <th>One</th>
    <th>Two</th>
    <th>Three</th>
</tr>
<tr>
    <td>Apples</td>
    <td>Carrots</td>
    <td>Steak</td>
</tr>
<tr>
    <td>Oranges</td>
    <td>Potato</td>
    <td>Pork</td>
</tr>
<tr>
    <td>Pears</td>
    <td>Peas</td>
    <td>Chicken</td>
</tr>
</table>



</center>
</body>
</html>

我该如何解决这个问题？

Answer 1

DEMO：FIDDLE

CSS将表更改为某个ID：

body{
background:url(aya.jpg);
}
#tableSec { 
 color: #333;
 font-family: Helvetica, Arial, sans-serif;
 width: 640px; 
 border-collapse: 
 collapse; border-spacing: 0; 
}

#tableSec td, #tableSec th { 
 border: 1px solid black;
 height: 30px; 
 transition: all 0.3s;
}

#tableSec th {
 background: #757575;
 font-weight: bold;
 color:white;
}

#tableSec td {
 background: #FAFAFA;
 text-align: center;
}


tableSec tr:nth-child(even) td { 
background: #F2F2F2; 
}   

#tableSec tr:nth-child(odd) td { 
background: #E6ECF2; 
}

在html代码中给出所需的表ID：

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/common-style.css">
<link rel="stylesheet" type="text/css" href="css/button.css">
</head>
<body>
<center>

<table>
<tr>
    <th>One</th>
    <th>Two</th>
    <th>Three</th>
</tr>
<tr>
    <td>Apples</td>
    <td>Carrots</td>
    <td>Steak</td>
</tr>
<tr>
    <td>Oranges</td>
    <td>Potato</td>
    <td>Pork</td>
</tr>
<tr>
    <td>Pears</td>
    <td>Peas</td>
    <td>Chicken</td>
</tr>
</table>


<table class="obd" id="tableSec">
<tr>
    <th>One</th>
    <th>Two</th>
    <th>Three</th>
</tr>
<tr>
    <td>Apples</td>
    <td>Carrots</td>
    <td>Steak</td>
</tr>
<tr>
    <td>Oranges</td>
    <td>Potato</td>
    <td>Pork</td>
</tr>
<tr>
    <td>Pears</td>
    <td>Peas</td>
    <td>Chicken</td>
</tr>
</table>



</center>
</body>
</html>

Answer 2

在CSS中使用table.obd代替table，并相应地更改所有table tr td相关的样式。

Answer 3

将您的CSS更改为

table.obd { 
    color: #333;
    font-family: Helvetica, Arial, sans-serif;
    width: 640px; 
    border-collapse: 
    collapse; border-spacing: 0; 
}

table.obd td, table.obd th { 
    border: 1px solid black;
    height: 30px; 
    transition: all 0.3s;
}

table.obd th {
    background: #757575;
    font-weight: bold;
    color:white;
}

table.obd td {
    background: #FAFAFA;
    text-align: center;
}


table.obd tr:nth-child(even) td { 
    background: #F2F2F2; 
}   

table.obd tr:nth-child(odd) td { 
    background: #E6ECF2; 
}

Answer 4

添加到第一个表类.first，第二个.second

Answer 5

首先，在现代网页设计中使用表格是不好的做法。但如果你是adament，请用.obd引用第二个表。我会在两个表上引用id而不是类。

如何仅在第二次出现时应用css

5 个答案: