Question

我试图做到这一点：

带有值的元素应该有一个灰色的带子＆＃39;。具有值的元素具有类<div class="row"> . . 2  3  2  . . 5  5  . </div> <div class="row"> ... </div>，没有任何值的元素不具有。

我的HTML看起来像这样：

selected

要完成灰色功能区，我想我需要这些CSS规则：

类:first-of-class的所有元素都应具有灰色背景。容易。
应该舍入一组具有“＆＃39;选择＆＃39;”的相邻元素的第一个和最后一个元素。不那么容易。

据我所知，没有像:first-adjacent-sibling-of-class这样的CSS选择器。而且，它还不够，因为多条丝带＆＃39;可以存在于同一条线上。我需要像docker image prune -a这样的东西。

有没有办法用纯CSS实现这一点，还是需要JavaScript？

Answer 1

我认为这可能会有所帮助，我添加了一个not-selected类并定位了相邻的选定元素

＆＃13;

.selected{
  background-color: #b7dafd;
}
span{
  float: left;
  padding: 10px;
  position: relative;
}
.not-selected+.selected{
  border-radius: 20px 0 0 20px;
  padding-left: 25px;
}
.selected+.not-selected:before{
  content: '';
  display: block;
  position: absolute;
  left:0;
  top: 0;
  height: 100%;
  border-right: 20px solid #b7dafd;
  border-radius: 0 20px 20px 0;
}

＆＃13;

<div class="row">
    <span class="not-selected">.</span>
    <span class="not-selected">.</span>
    <span class="selected">2</span> <!-- Should be gray & rounded (left) -->
    <span class="selected">3</span> <!-- Should be gray -->
    <span class="selected">2</span> <!-- Should be gray & rounded (right) -->
    <span class="not-selected">.</span>
    <span class="not-selected">.</span>
    <span class="selected">5</span> <!-- Should be gray & rounded (left) -->
    <span class="selected">5</span> <!-- Should be gray & rounded (right) -->
    <span class="not-selected">.</span>
    <span class="not-selected">.</span>
    <span class="not-selected">.</span>
    <span class="selected">2</span> <!-- Should be gray & rounded (left) -->
    <span class="selected">3</span> <!-- Should be gray -->
    <span class="selected">2</span> <!-- Should be gray & rounded (right) -->
    <span class="not-selected">.</span>
    <span class="not-selected">.</span>
    <span class="not-selected">.</span>
    <span class="selected">5</span> <!-- Should be gray & rounded (left) -->
    <span class="selected">5</span> <!-- Should be gray & rounded (right) -->
    <span class="not-selected">.</span>
    <span class="not-selected">.</span>
    <span class="not-selected">.</span>
</div>

＆＃13;

Answer 2

我认为这对您的问题

是最佳解决方案

由于我使用了 span.selected+span.selected:before 这样的风格，所以您的选择是安全的，不会突破到下一行。

试试这个并告诉我是否还有更多.T。干杯..

div {
  display: inline-block
}

span {
  display: inline-block;
  float: left;
  padding: 15px;
  position: relative;
  /* top: 0; */
  margin: 10px 0;
}

span.selected {
  background: gray;
  border-radius: 50%;
}

span.selected+span.selected:before {
  content: '';
  height: 100%;
  width: 40px;
  position: absolute;
  background: gray;
  top: 0;
  left: -20px;
  z-index: -1;
}

span.selected+span.not {
  border-radius: 50%;
}

<div>
  <span class="selected">1</span>
  <span class="selected">2</span>
  <span class="selected">3</span>
  <span class="selected">4</span>
  <span class="selected">5</span>
  <span class="not">6</span>
  <span class="not">7</span>
  <span class="not">8</span>
  <span class="not">9</span>
  <span class="selected">10</span>
  <span class="selected">11</span>
  <span class="selected">12</span>
  <span class="selected">13</span>
  <span class="selected">14</span>
  <span class="selected">15</span>
  <span class="not">16</span>
  <span class="not">17</span>
  <span class="not">18</span>
  <span class="not">19</span>
  <span class="not">20</span>
</div>

Answer 3

每个.selected都是一个圆圈。
第一个.selected ~的所有.selected兄弟姐妹都有负边距，左边是border-radius:0
.selected后面的所有:not(.selected) +都是左边距为正的圆圈。
:not(.selected)后面的所有.selected +左边距为正
除非您使用标记专门制作

演示

.row {
  white-space: nowrap;
}

.selected {
  background: grey;
  height: 4ex;
  width: 4ch;
  border-radius: 50%;
  display: inline-block;
  margin: 0 -4px;
  line-height: 2;
  text-align: center;
}

.selected~.selected {
  margin: 0 -12px;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

*:not(.selected)+.selected {
  border-top-left-radius: 50%;
  border-bottom-left-radius: 50%;
  margin: 0 -12px 0 12px
}

.selected+*:not(selected) {
  margin: 0 0 0 12px
}

<div class="row">
  <span>.</span>
  <span>.</span>
  <span class="selected">2</span>
  <span class="selected">3</span>
  <span class="selected">2</span>
  <span>.</span>
  <span>.</span>
  <span class="selected">5</span>
  <span class="selected">5</span>
  <span>.</span>
</div>
<div class="row">
  <span>.</span>
  <span>.</span>
  <span class="selected">2</span>
  <span class="selected">3</span>

  <span>.</span>
  <span class="selected">2</span>
  <span>.</span>
  <span class="selected">5</span>
  <span class="selected">5</span>
  <span>.</span>
  <span class="selected">2</span>
  <span class="selected">2</span>
  <span class="selected">2</span>
  <span>.</span>
  <span>.</span>
  <span>.</span>
  <span class="selected">5</span>
  <span class="selected">5</span>
  <span class="selected">5</span>
</div>
<span class="selected">5</span>

CSS：类的第一个和最后一个相邻的兄弟

3 个答案:

演示