Question

例如，我想编辑一下：

table.organization_detail tr td {
  font-size:20px;
}

但是上面的代码根本就没有做任何事情，我不确定如何通过上面的层次结构来定位TD元素。从本质上讲，这是一个带有organization_detail类的表，它具有tr和td元素。 td元素的字体大小太大了，我想把它变成20px。

定位此元素的正确语法是什么？

谢谢！

编辑（下面是html）：

 <div class="organization-detail-info">
    <div class="inner-bgdown">
      <h3 class="account_titles">Account Details (<a href='#' data-toggle="modal" data-target="#account_details">Edit</a>)</h3>
      <table class="table organization_detail">
        <tr>
          <td>Name of Organization:</td>
          <td><%= @account.organization.name if @account.organization.present? %></td>
        </tr>
        <tr>
          <td>Organization Type:</td>
          <td><%= Organization::ORG_TYPE[@account.organization.organization_type] if @account.organization.present? %></td>
        </tr>
        <tr>
          <td>Address:</td>
          <td><%= @account.organization.address_1 if @account.organization.present? %> <%= @account.organization.address_2 if @account.organization.present? %></td>
        </tr>
        <tr>
          <td>City:</td>
          <td><%= @account.organization.city if @account.organization.present? %></td>
        </tr>
        <tr>
          <td>State/Province:</td>
          <td><%= @account.organization.state if @account.organization.present? %></td>
        </tr>
        <tr>
          <td>Zip/Postal Code:</td>
          <td><%= @account.organization.zip if @account.organization.present? %></td>
        </tr>
        <tr>
          <td>Country:</td>
          <td><%= @account.organization.country_id if @account.organization.present? %></td>
        </tr>
        <tr>
          <td>Phone Number:</td>
          <td><%= @account.organization.phone_number if @account.organization.present? %></td>
        </tr>
      </table>
    </div>
  </div>
  <!-- End-organization-detail-info -->

和CSS：

.organization_detail td:nth-child(1) {
  font-size: 16px;
  width: 40%;
  color:#000;
  font-family: 'Source Sans Pro', sans-serif;
  font-weight: 300;
  line-height:36px;
}
.organization_detail td:nth-child(2) {
  width: 60%;
  font-family: 'Source Sans Pro', sans-serif;
  font-weight: 300;
  color:#000;
  font-size:20px;
}
table.organization_detail tr td {
  font-size:20px;
}

Answer 1

我上面的评论是为了澄清为什么两个片段都在这里完全发布。

＆＃34;你的代码工作正常。问题是层次结构的工作方式与它应该完全一样。 .organization_detail td:nth-child(1)比table.organization_detail tr td更具体。如果你想要覆盖它，你必须更具体。 table.organization_detail tr td与.organization_detail td的说法相同。几乎完全相同的细节水平。＆＃34;

这是你的代码......

＆＃13;

.organization_detail td:nth-child(1) {
  font-size: 16px;
  width: 40%;
  color:#000;
  font-family: 'Source Sans Pro', sans-serif;
  font-weight: 300;
  line-height:36px;
}
.organization_detail td:nth-child(2) {
  width: 60%;
  font-family: 'Source Sans Pro', sans-serif;
  font-weight: 300;
  color:#000;
  font-size:20px;
}
table.organization_detail tr td {
  font-size:20px;
}

＆＃13;

<div class="organization-detail-info">
    <div class="inner-bgdown">
      <h3 class="account_titles">Account Details (<a href='#' data-toggle="modal" data-target="#account_details">Edit</a>)</h3>
      <table class="table organization_detail">
        <tr>
          <td>Name of Organization:</td>
          <td>x</td>
        </tr>
        <tr>
          <td>Organization Type:</td>
          <td>x</td>
        </tr>
        <tr>
          <td>Address:</td>
          <td>x</td>
        </tr>
        <tr>
          <td>City:</td>
          <td>x</td>
        </tr>
        <tr>
          <td>State/Province:</td>
          <td>x</td>
        </tr>
        <tr>
          <td>Zip/Postal Code:</td>
          <td>x</td>
        </tr>
        <tr>
          <td>Country:</td>
          <td>x</td>
        </tr>
        <tr>
          <td>Phone Number:</td>
          <td>x</td>
        </tr>
      </table>
    </div>
  </div>

＆＃13;

这是我认为你想要的代码。

＆＃13;

.organization_detail td:nth-child(1) {
  font-size: 16px;
  width: 40%;
  color:#000;
  font-family: 'Source Sans Pro', sans-serif;
  font-weight: 300;
  line-height:36px;
}
.organization_detail td:nth-child(2) {
  width: 60%;
  font-family: 'Source Sans Pro', sans-serif;
  font-weight: 300;
  color:#000;
}
.inner-bgdown table.organization_detail tr td {
  font-size:20px;
}

＆＃13;

<div class="organization-detail-info">
    <div class="inner-bgdown">
      <h3 class="account_titles">Account Details (<a href='#' data-toggle="modal" data-target="#account_details">Edit</a>)</h3>
      <table class="table organization_detail">
        <tr>
          <td>Name of Organization:</td>
          <td>x</td>
        </tr>
        <tr>
          <td>Organization Type:</td>
          <td>x</td>
        </tr>
        <tr>
          <td>Address:</td>
          <td>x</td>
        </tr>
        <tr>
          <td>City:</td>
          <td>x</td>
        </tr>
        <tr>
          <td>State/Province:</td>
          <td>x</td>
        </tr>
        <tr>
          <td>Zip/Postal Code:</td>
          <td>x</td>
        </tr>
        <tr>
          <td>Country:</td>
          <td>x</td>
        </tr>
        <tr>
          <td>Phone Number:</td>
          <td>x</td>
        </tr>
      </table>
    </div>
  </div>

＆＃13;

Answer 2

就常规CSS而言，这看起来像这样

TD.class#id{}

或

TD#id{}

你也可以

TD.class{}

甚至只是

TD{}

其中每个都使用基本的CSS

在大多数情况下，如果你有大量数据，你主要想做（Tag.class＃id）其他具有较少数据的情况（标签#id）也可以使用。

现在，如果你想简化它，只需使用类或id

.class{}
#id{}

编辑基本上元素目标不包含空格，你可以通过向所需元素添加ID来缩短长度

<td id="ex" class="example"...>...</td>

Answer 3

您是否尝试过简单地为该元素提供ID？

即

    #exampleTD{
        font-size: 20px;
   }

    <td id="exampleID">

    </td>

而不是ID，请尝试将其添加为类，以便您可以影响多个。

.exampleClass{
font-size: 20px;
}
<td class="exampleClass">
</td>

如何通过层次结构编辑td元素的CSS？

3 个答案: