如何定位埋在某些 div 下的 table？

Question

我有一个 table，我正在尝试使用 CSS 定位第 5 行。它被埋在 4 divs.

之下

定位 table 的最佳方法是什么？它使用的 class 在整个网站的许多其他 table 上重复了很多次，但我只想针对这个 table 我添加了一个 class of .q4 :

基本上我正在尝试更改 table 中嵌套在 div 中的行的底部边框，在 div 中, 在 div 内。完整的html如下：

<div class="mobile-league-table q4">
<div class="sportspress">
    <div class"sp-template sp-template-league-table">
        <h4 class="sp-table-caption">UAE Division 1</h4>
        <div class="sp-table-wrapper">
            <div class="sp-scrollable-table-wrapper">
                <table class="sp-league-table sp-data-table sp-scrollable-table" data-sp-rows="10">
                    <thead>
                        <tr>
                            <th class="data-rank">Pos</th>
                            <th class="data-name">Team</th>
                            <th class="data-p">P</th>
                            <th class="data-w">W</th>
                            <th class="data-l">L</th>
                            <th class="data-d">D</th>
                            <th class="data-pf">PF</th>
                            <th class="data-pa">PA</th>
                            <th class="data-pd">PD</th>
                            <th class="data-bp">BP</th>
                            <th class="data-pts">Pts</th>
                            <th class="data-form">Form</th>
                        </tr>
                    </thead>
                    <tbody>
                    <tr class="odd sp-row-no-0">…</tr>
                    <tr class="even sp-row-no-1">…</tr>
                    <tr class="odd sp-row-no-2">…</tr>
                    <tr class="even sp-row-no-3">…</tr>
                    <tr class="odd sp-row-no-4">…</tr>
                    <tr class="even sp-row-no-5">…</tr>
                    <tr class="odd sp-row-no-6">…</tr>
                    <tr class="even sp-row-no-7">…</tr>
                    <tr class="odd sp-row-no-8">…</tr>
                    <tr class="even sp-row-no-9">…</tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

谢谢

Answer 1

WordPress ？哎呀。

最好的办法是在 HTML 加载后进行一些 DOM 操作。我建议使用 jquery。但是如果你不能将 jquery 导入到你的项目中。当然，您仍然可以使用 javascript.

实现此目的

var x = document.getElementsByClassName('.sp-row-no-4');
x[0].innerHTML = "Hello World!";

getElementsByClassName() returns 一个数组，即使通过该 class 名称只能找到一个元素。希望对您有所帮助。

Answer 2

由于 q4 div 中的 table 是唯一一个我们可以非常简单地定位它

.q4 table tbody tr:nth-child(your number here) td {
   border-bottom: 1px solid black;
}

td {
  padding:.25em;
}

.q4 table tbody tr:nth-child(3) td {
   border-bottom: 1px solid black;
}

<div class="mobile-league-table q4">
  <div class="sportspress">
    <div class"sp-template sp-template-league-table">
    <h4 class="sp-table-caption">UAE Division 1</h4>
    <div class="sp-table-wrapper">
      <div class="sp-scrollable-table-wrapper">
        <table
          class="sp-league-table sp-data-table sp-scrollable-table"
          data-sp-rows="10"
        >
          <thead>
            <tr>
              <th class="data-rank">Pos</th>
              <th class="data-name">Team</th>
              <th class="data-p">P</th>
              <th class="data-w">W</th>
              <th class="data-l">L</th>
              <th class="data-d">D</th>
              <th class="data-pf">PF</th>
              <th class="data-pa">PA</th>
              <th class="data-pd">PD</th>
              <th class="data-bp">BP</th>
              <th class="data-pts">Pts</th>
              <th class="data-form">Form</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>Item 1</td>
              <td>Item 2</td>
              <td>Item 3</td>
              <td>Item 4</td>
              <td>Item 5</td>
            </tr>
            <tr>
              <td>Item 1</td>
              <td>Item 2</td>
              <td>Item 3</td>
              <td>Item 4</td>
              <td>Item 5</td>
            </tr>
            <tr>
              <td>Item 1</td>
              <td>Item 2</td>
              <td>Item 3</td>
              <td>Item 4</td>
              <td>Item 5</td>
            </tr>
            <tr>
              <td>Item 1</td>
              <td>Item 2</td>
              <td>Item 3</td>
              <td>Item 4</td>
              <td>Item 5</td>
            </tr>
            <tr>
              <td>Item 1</td>
              <td>Item 2</td>
              <td>Item 3</td>
              <td>Item 4</td>
              <td>Item 5</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>

如何定位埋在某些 div 下的 table？

How do I target a table that is buried under some divs?

html

css

css-tables