Question

如何将CSS应用于一个特定表的td;排除网页中的所有其他表格？

<table class="pure-table fullWidth" id="ToBeApplied">
 <tbody>
  <tr class="pure-table-odd">
   <td>
    <label>Bank</label>
   </td>
   <td>
    <label>Japha Bank</label>
   </td>
  </tr>
 </tbody>
</table>
<table class="pure-table fullWidth" id="NotToBeApplied">
 <tbody>
  <tr class="pure-table-odd">
   <td>
    <label>Bank</label>
   </td>
   <td>
    <label>Japha Bank</label>
   </td>
  </tr>
 </tbody>
</table>

我想申请CSS说

td {padding:23px;font-weight:bold}

我想将其应用于有ID＆＃39; ToBeApplied＆＃39;
我不想写一个类，并在表的每个td上写一遍
我不希望它适用于第二张桌子上的ID＆＃39;＆＃39; NotToBeApplied＆＃39;＆＃39;

如何修改HTML和CSS以实现上述目标？

Answer 1

使用CSS选择器，例如

#ToBeApplied td {padding:23px;font-weight:bold}

Answer 2

这应该有用（假设你不想为表指定<% using (Html.BeginForm()) {%> <%: Html.ValidationSummary(true) %> <%: Html.DropDownListFor(model => model.ProductCode, (IEnumerable<SelectListItem>)ViewData["Products"], new { id = "productSelect", onchange="OnProductChange"})%> <input type="submit" value="Save" /> <% } %>）

<script src="<%= Url.Content("~/Scripts/MicrosoftAjax.debug.js") %>" 
    type="text/javascript"></script>  
<script src="<%= Url.Content("~/Scripts/MicrosoftMvcAjax.debug.js") %>" 
    type="text/javascript"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

<script type="text/javascript">
function OnProductChange() {
    alert("Message");
}
</script>

<强> DEMO

Answer 3

只需添加以下样式：

<style type="text/css">
    #ToBeApplied tr td{padding:23px;font-weight:bold}
</style>

可以在样式之前使用父级限制CSS应用程序..

我希望这能帮助你实现你所需要的！

Answer 4

这就是你想要的。

查看此fiddle。

#ToBeApplied td {
    padding:23px;
    font-weight:bold
}

以下是摘录。

#ToBeApplied td {
  padding: 23px;
  font-weight: bold
}

<table class="pure-table fullWidth" id="ToBeApplied">
  <tbody>
    <tr class="pure-table-odd">
      <td>
        <label>Bank</label>
      </td>
      <td>
        <label>Japha Bank</label>
      </td>
    </tr>
  </tbody>
</table>
<table class="pure-table fullWidth" id="NotToBeApplied">
  <tbody>
    <tr class="pure-table-odd">
      <td>
        <label>Bank</label>
      </td>
      <td>
        <label>Japha Bank</label>
      </td>
    </tr>
  </tbody>
</table>

如何将CSS应用于特定表的td？

4 个答案: