使用CSS和SASS选择具有类的唯一子级

1dkrff03  于 2023-01-06  发布在  其他
关注(0)|答案(3)|浏览(133)

我正在使用SASS为'tbody'元素中的行创建一个边框,但是我无法在一个案例中删除它。
例如,
在第一个'tbody'元素中,tbody有两个子类compDetails-row,我在那里创建一个边框。
然而,在第二个tbody元素中,正如你所看到的,只有一个子类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>
svujldwt

svujldwt1#

不幸的是,:first-of-type只检查标签名(在本例中为tr),并且目前没有:first-of-class伪类。理想情况下,如果有多个.compDetails-row,您可以在运行时修改表标记,如果没有,您最好使用一些JavaScript。
你可以访问CSS/SASS,难道你不能访问JavaScript吗?这个问题只针对CSS,但正如我提到的,如果不修改标记,它实际上是不可行的。
如果您能够访问JavaScript文件,或者在网站的页脚添加JavaScript标记,这里有一个简单的纯JavaScript方法,如果同一个tbody中有多个类,则将multiple添加到.compDetails-row

// 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>
h79rfbju

h79rfbju2#

使用the :has() pseudo-classwhich is currently a working draft and behind a flag in Firefox,这只能通过CSS实现。

tbody:not(:has(.compDetails-row ~ .compDetails-row)) .compDetails-row::before {
  border: none;
}

JSFiddle

nvbavucw

nvbavucw3#

我假设它有一个表作为父级,因此可以使用伪选择器first-of-type,或者如果表没有<thead>,则使用first-child

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>

相关问题