Select 唯一的 child 有 class 使用 CSS & SASS

Question

我正在使用 SASS 为“tbody”元素中的行创建边框，但在某些情况下我无法删除它。

例如，

在第一个 'tbody' 元素中，tbody 有 2 children 和 class compDetails-row。我正在那里创建一个边界。

但是，在第 2 个 tbody 元素中，如您所见，只有 1 个 child 带有 class compDetails-row，我不想要边框要施加。因此，我尝试使用 only-of-type 选择器，但它似乎不起作用。

我该如何解决？

<!-- language: lang-css -->

    .compDetails-row {
      position: relative;
      &:before {
        content: '';
        display: inline-block;
        height: 100%;
        border-left: 1px solid grey;
        float: right;
        position: absolute;
        right: 20%;
      }
      &.compDetails-row:only-of-type {
        &:before {
          border: none;
        }
      }
    }

<!-- language: lang-html -->

    <tbody>
      <tr class="compDetails-row">
        <td>Row1 Column1</td>
        <td>Row1 Column2</td>
        <td>Row1 Column3</td>
      </tr>
      <tr class="compDetails-row">
        <td>Row2 Column1</td>
        <td>Row2 Column2</td>
        <td>Row2 Column3</td>
      </tr>
      <tr>
        <td>View Details</td>
      </tr>
    </tbody>
    <tbody>
      <tr class="compDetails-row">
        <td>Row1 Column1</td>
        <td>Row1 Column2</td>
        <td>Row1 Column3</td>
      </tr>
      <tr>
        <td>View Details</td>
      </tr>
    </tbody>

Answer 1

我假设它有一个 table 作为父级，所以你可以使用 pseudo-selectors first-of-type，或者 first-child 如果 table没有 <thead>

table tbody:first-of-type .compDetails-row td {
  border: 1px solid red;
}

<table>
  <thead>
  </thead>
  <tbody>
    <tr class="compDetails-row">
      <td>Row1 Column1</td>
      <td>Row1 Column2</td>
      <td>Row1 Column3</td>
    </tr>
    <tr class="compDetails-row">
      <td>Row2 Column1</td>
      <td>Row2 Column2</td>
      <td>Row2 Column3</td>
    </tr>
    <tr>
      <td>View Details</td>
    </tr>
  </tbody>
  <tbody>
    <tr class="compDetails-row">
      <td>Row1 Column1</td>
      <td>Row1 Column2</td>
      <td>Row1 Column3</td>
    </tr>
    <tr>
      <td>View Details</td>
    </tr>
  </tbody>
</table>

Answer 2

不幸的是，:first-of-type 只检查标签名称（在本例中为 tr），目前没有 :first-of-class pseudo-class。理想情况下，如果有多个 .compDetails-row，您可以在运行时修改 table 标记，否则 - 最好的选择是一些 JavaScript.

您可以访问 CSS/SASS，您是否没有访问 JavaScript？这个问题仅针对 CSS 进行了标记，但正如我所提到的，如果不更改您的标记，它是不可行的。

如果您能够访问 JavaScript 文件，或将 JavaScript 标记添加到网站的页脚，这里有一个简单的 pure/vanilla JavaScript 方法如果在同一个 tbody.

中有多个，则向 .compDetails-row 添加 class multiple

// Grab all the `<tbody>` elements in the document as an array
var tbodies = document.querySelectorAll('tbody');

// Loop through the `<tbody>`'s we grabbed
for( i = 0; i < tbodies.length; i++ ){

  // Grab all the `.compDetails-row` elements that exist in the current <tbody>
  rows = tbodies[i].querySelectorAll('.compDetails-row');
  
  // If there's more than one `.compDetails-row`
  if( rows.length > 1 ){
  
    // Loop through the `.compDetails-row` elements
    rows.forEach(function(item){
    
      // Add the `multiple` class to them
      item.classList.add('multiple');
      
    });
  }
}

.compDetails-row {
  position: relative;
}

.compDetails-row.multiple:before {
  content: '';
  display: inline-block;
  height: 100%;
  border-left: 1px solid grey;
  float: right;
  position: absolute;
  right: 20%;
}

<table>
  <thead>
  </thead>
  <tbody>
    <tr class="compDetails-row">
      <td>Row1 Column1</td>
      <td>Row1 Column2</td>
      <td>Row1 Column3</td>
    </tr>
    <tr class="compDetails-row">
      <td>Row2 Column1</td>
      <td>Row2 Column2</td>
      <td>Row2 Column3</td>
    </tr>
    <tr>
      <td>View Details</td>
    </tr>
  </tbody>
  <tbody>
    <tr class="compDetails-row">
      <td>Row1 Column1</td>
      <td>Row1 Column2</td>
      <td>Row1 Column3</td>
    </tr>
    <tr>
      <td>View Details</td>
    </tr>
  </tbody>
</table>

Select 唯一的 child 有 class 使用 CSS & SASS

Select the only child having the class using CSS & SASS

css

sass

css-selectors

pseudo-class