使用 CSS 定位接下来的几个兄弟姐妹

Posted 2023-02-25

【中文标题】使用 CSS 定位接下来的几个兄弟姐妹

【英文标题】：Targeting the next several siblings with CSS

【发布时间】：2020-07-20 15:13:33

【问题描述】：

我需要按数据属性查找元素，对其应用一些 CSS，但还要将其应用到它旁边的其他几个兄弟姐妹。

我已经尝试过类似的方法，但它只适用于具有数据属性的元素。

.fc-widget-header[data-date='2020-07-20T00:00:00']:nth-child(n+1):nth-child(-n+5)  color: #f00; 

我也试过这个，但它只会将 css 应用于我的元素的第一个兄弟元素与 data-attr。

.fc-widget-header[data-date='2020-07-20T00:00:00'] + .fc-widget-header:nth-child(n+1):nth-child(-n+5)  color: #f00; 

我需要应用到这样的元素，例如前 X 个元素（元素的数量是可变的）。

<th class="fc-widget-header" data-date="2020-07-20T00:00:00" colspan="2">
  <div class="fc-cell-content"><span class="fc-cell-text">po 20.</span></div>
</th>
<th class="fc-widget-header" data-date="2020-07-21T00:00:00" colspan="2">
  <div class="fc-cell-content"><span class="fc-cell-text">út 21.</span></div>
</th>
<th class="fc-widget-header" data-date="2020-07-22T00:00:00" colspan="2">
  <div class="fc-cell-content"><span class="fc-cell-text">st 22.</span></div>
</th>
<th class="fc-widget-header" data-date="2020-07-23T00:00:00" colspan="2">
  <div class="fc-cell-content"><span class="fc-cell-text">čt 23.</span></div>
</th>

【参考方案1】：

看起来您正在寻找通用兄弟组合器 (~)。

.fc-widget-header[data-date='2020-07-20T00:00:00'] ~ th 
  color: #f00;

<table>
  <th class="fc-widget-header" data-date="2020-07-20T00:00:00" colspan="2">
    <div class="fc-cell-content"><span class="fc-cell-text">po 20.</span></div>
  </th>
  <th class="fc-widget-header" data-date="2020-07-21T00:00:00" colspan="2">
    <div class="fc-cell-content"><span class="fc-cell-text">út 21.</span></div>
  </th>
  <th class="fc-widget-header" data-date="2020-07-22T00:00:00" colspan="2">
    <div class="fc-cell-content"><span class="fc-cell-text">st 22.</span></div>
  </th>
  <th class="fc-widget-header" data-date="2020-07-23T00:00:00" colspan="2">
    <div class="fc-cell-content"><span class="fc-cell-text">čt 23.</span></div>
  </th>
</table>

基本上，general sibling combinator (~) 以所有后续兄弟为目标。

注意与adjacent sibling combinator (+) 的区别，它只针对下一个兄弟。