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

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

html css

Html 如何仅在第二次出现时应用css,html,css,Html,Css,在这里，我试图将css仅应用于第二个表但是在我的网页中我有两个表，如果我对表应用这个css 两个表都采用css。但是我只想对第二个表应用css css代码： body{ background:url(aya.jpg); } table { color: #333; font-family: Helvetica, Arial, sans-serif; width: 640px; border-collapse: collapse; bord

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

但是在我的网页中我有两个表，如果我对表应用这个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>


一个
两个
三
苹果
胡萝卜
牛排
橘子
马铃薯
猪肉
梨
豌豆
鸡
一个
两个
三
苹果
胡萝卜
牛排
橘子
马铃薯
猪肉
梨
豌豆
鸡

如何解决这个问题？

在CSS中使用

table.obd

而不是

table

，并相应地更改所有

table tr td

相关样式。

首先，在现代web设计中使用table是一种不好的做法。但是如果您是adament，请使用.obd引用第二个表。不过，我会在两个表上使用id而不是类进行引用。

添加到第一个表类。第一个和第二个表类。第二个表类将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; 
}

演示：

CSS将表格更改为某个ID:

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


一个
两个
三
苹果
胡萝卜
牛排
橘子
马铃薯
猪肉
梨
豌豆
鸡
一个
两个
三
苹果
胡萝卜
牛排
橘子
马铃薯
猪肉
梨
豌豆
鸡

对于表格式数据来说，表是很好的，这似乎是正确的。我不得不恭敬地表示不同意。是的，编写起来比较容易，但是在下载表的所有标记之前，不会呈现该表，而下载标记后，将立即呈现各个div。它还为样式设置增加了更多的灵活性。@DanielSchwarz:是的，但您不使用div来显示“真实”表格！当然我能问一下为什么吗？我已经添加了我的理由，但没有人说明使用表的好处。@DanielSchwarz认为Chris Coyier应该在博客中发布关于表元素的内容似乎是及时的。他解释得比我好得多：

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; 
}

<!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>