将元素类型与ID组合

时间：2016-11-23 05:29:48

标签： html css css-selectors

我在一个HTML中有几个表。我想分别为每个表设置样式。我试过这个，它适用于table元素，但它不适用于td和th元素（我还想仅对表{tr:nth-child(even)应用规则#pisani {1}}：

#pisani {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}
td#pisani {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}
th#pisani {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}
tr:nth-child(even) {
  background-color: #dddddd;
}
<table id="pisani">
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
  <tr>
    <td>Ernst Handel</td>
    <td>Roland Mendel</td>
    <td>Austria</td>
  </tr>
  <tr>
    <td>Island Trading</td>
    <td>Helen Bennett</td>
    <td>UK</td>
  </tr>
  <tr>
    <td>Laughing Bacchus Winecellars</td>
    <td>Yoshi Tannamuri</td>
    <td>Canada</td>
  </tr>
  <tr>
    <td>Magazzini Alimentari Riuniti</td>
    <td>Giovanni Rovelli</td>
    <td>Italy</td>
  </tr>
</table>

4 个答案:

答案 0 :(得分：1)

你的css使用有一些错误。请参阅以下代码，它可能对您有所帮助

#pisani {
    font-family: arial, sans-serif;
    border-collapse: collapse;
    width: 100%;
}

#pisani td{
    border: 1px solid #dddddd;
    text-align: left;
    padding: 8px;
}

 #pisani th {
    border: 1px solid #dddddd;
    text-align: left;
    padding: 8px;
}



 tr:nth-child(even) {
    background-color: #dddddd;
}
<table id="pisani">
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
  <tr>
    <td>Ernst Handel</td>
    <td>Roland Mendel</td>
    <td>Austria</td>
  </tr>
  <tr>
    <td>Island Trading</td>
    <td>Helen Bennett</td>
    <td>UK</td>
  </tr>
  <tr>
    <td>Laughing Bacchus Winecellars</td>
    <td>Yoshi Tannamuri</td>
    <td>Canada</td>
  </tr>
  <tr>
    <td>Magazzini Alimentari Riuniti</td>
    <td>Giovanni Rovelli</td>
    <td>Italy</td>
  </tr>
</table>

答案 1 :(得分：1)

您只是使用了错误的选择器。使用parent to child格式的选择器。

有关CSS Selectors

的更多信息 

#pisani {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}
#pisani td {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}
#pisani th{
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}
#pisani tr:nth-child(even) {
  background-color: #dddddd;
}
<table id="pisani">
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
  <tr>
    <td>Ernst Handel</td>
    <td>Roland Mendel</td>
    <td>Austria</td>
  </tr>
  <tr>
    <td>Island Trading</td>
    <td>Helen Bennett</td>
    <td>UK</td>
  </tr>
  <tr>
    <td>Laughing Bacchus Winecellars</td>
    <td>Yoshi Tannamuri</td>
    <td>Canada</td>
  </tr>
  <tr>
    <td>Magazzini Alimentari Riuniti</td>
    <td>Giovanni Rovelli</td>
    <td>Italy</td>
  </tr>
</table>

答案 2 :(得分：1)

使用#pisani tr，这意味着像#pisani

中的所有内容一样

＆＃13;
＆＃13; 
#pisani {
    font-family: arial, sans-serif;
    border-collapse: collapse;
    width: 100%;
}

#pisani td{
    border: 1px solid #dddddd;
    text-align: left;
    padding: 8px;
}

 #pisani th {
    border: 1px solid #dddddd;
    text-align: left;
    padding: 8px;
}



 #pisani tr:nth-child(even) {
    background-color: #dddddd;
}
＆＃13; 
 <table id="pisani">
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
  <tr>
    <td>Ernst Handel</td>
    <td>Roland Mendel</td>
    <td>Austria</td>
  </tr>
  <tr>
    <td>Island Trading</td>
    <td>Helen Bennett</td>
    <td>UK</td>
  </tr>
  <tr>
    <td>Laughing Bacchus Winecellars</td>
    <td>Yoshi Tannamuri</td>
    <td>Canada</td>
  </tr>
  <tr>
    <td>Magazzini Alimentari Riuniti</td>
    <td>Giovanni Rovelli</td>
    <td>Italy</td>
  </tr>
</table>
 <table>
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
  <tr>
    <td>Ernst Handel</td>
    <td>Roland Mendel</td>
    <td>Austria</td>
  </tr>
  <tr>
    <td>Island Trading</td>
    <td>Helen Bennett</td>
    <td>UK</td>
  </tr>
  <tr>
    <td>Laughing Bacchus Winecellars</td>
    <td>Yoshi Tannamuri</td>
    <td>Canada</td>
  </tr>
  <tr>
    <td>Magazzini Alimentari Riuniti</td>
    <td>Giovanni Rovelli</td>
    <td>Italy</td>
  </tr>
</table>
＆＃13;
＆＃13;
＆＃13;

答案 3 :(得分：1)

你应该做这样的事情

你正在做td＃pisani，这意味着你正在寻找带有id pisani的td，这是错误的。你应该把它改成#pisani tr，td，th（在pisani里面它正在寻找tr，td和TH）

＆＃13;
＆＃13; 
#pisani {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}
#pisani tr,
th,
td {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}
#pisani tr:nth-child(even) {
  background-color: #dddddd;
}
＆＃13; 
<table id="pisani">
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
  <tr>
    <td>Ernst Handel</td>
    <td>Roland Mendel</td>
    <td>Austria</td>
  </tr>
  <tr>
    <td>Island Trading</td>
    <td>Helen Bennett</td>
    <td>UK</td>
  </tr>
  <tr>
    <td>Laughing Bacchus Winecellars</td>
    <td>Yoshi Tannamuri</td>
    <td>Canada</td>
  </tr>
  <tr>
    <td>Magazzini Alimentari Riuniti</td>
    <td>Giovanni Rovelli</td>
    <td>Italy</td>
  </tr>
</table>
＆＃13;
＆＃13;
＆＃13;

希望有所帮助

相关问题
最新问题