突出显示最后一个元素的类名的下一个元素 - CSS3答案

【问题标题】：Highlight next element of class name of last element - CSS3突出显示最后一个元素的类名的下一个元素 - CSS3
【发布时间】：2017-02-25 05:05:23
【问题描述】：

使用下面的代码，我可以突出显示值为 2 和 3 而不是元素 3 的元素。我尝试使用 last child 和 nth-last-type 但没有按预期工作。问题是突出显示类的下一个元素 - 活动并将闪烁应用于 3 的刻度线和值 3 以及更改活动类以更改闪烁

没有 Jquery 解决方案，目前正在尝试使用 CSS3 实现

我正在尝试仅使用 CSS 选择没有活动类的高亮类的第一个元素

HTML：

<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

</head>
<div class="steps" style="width:26%;float:left">
        <div class="stepSection">
 <table>
            <tr><td><div class="highlight active"><span class="glyphicon glyphicon glyphicon-ok"></span></div></td><td>1.</td><td> <span>one</span></td></tr>
            <tr><td><div class="highlight active" ><span class="glyphicon glyphicon glyphicon-ok"></span></div></td><td>2.</td><td> <span>two</span></td></tr>
            <tr><td><div class="highlight"><span class="glyphicon glyphicon glyphicon-ok"></span></div> </td><td>3.</td><td><span>three</span></td></tr>
 <tr><td><div class="highlight"><span class="glyphicon glyphicon glyphicon-ok"></span></div> </td><td>3.</td><td><span>four</span></td></tr>
        </table>
      </div>
      </div>

  <div style="width:2%;float:left;">
          <div class="highlight active">1</div>
          <div class="highlight active">2</div>
          <div class="highlight">3</div>
          <div class="highlight">4</div>
      </div>

CSS3：

.highlight{
    color:white;
    width:20px;
    height:20px;
    border-radius:50%;
    background: rgb(234,116,0);
    display: inline-block;
  text-align: center;
}

.active{
    background:green;
}

@keyframes blink {
to { background: rgb(234,116,0); }
}

.active + .highlight{
color: white;
background: white;
animation: blink 2s steps(2, start) infinite;
}

【问题讨论】：

有点像你使用 glyphicon 类的次数太多了......另外，你能澄清一下你的问题吗？很难理解您的要求。
Matt，我正在尝试使类的下一个元素闪烁，如果 value1 元素处于活动状态，则闪烁 2，如果 value2 元素，则闪烁 3，总之我试图选择第一个元素仅使用 CSS 的没有活动类的类高亮显示

标签： html css

【解决方案1】：

方法一：jQuery 你可以像这样使用jquery来做到这一点

$(".active:last").next().addClass("blink")

并将你的 css 更改为具有闪烁类

.blink {
color: white;
background: white;
animation: blink 2s steps(2, start) infinite;
}

Working Js fiddle

方法二： 如果你只想使用 css 来做，你需要保留你的最后一个元素通过向最后一个元素添加一个类，比如.last

 <div style="width:2%;float:left;">
     <div class="highlight active">1</div>
     <div class="highlight active last">2</div>
     <div class="highlight">3</div>
     <div class="highlight">4</div>
 </div>

然后你喜欢css吗

.last + .highlight {
   color: white;
   background: white;
   animation: blink 2s steps(2, start) infinite;
}

方法三：

把你的css改成

   div.active + div:not(.active){
    color: white;
    background: white;
    animation: blink 2s steps(2, start) infinite;
    }

基本上，它会找到在其之前具有活动类的元素以及没有活动类的下一个类。

working jsfiddle

【讨论】：

谢谢，但是否有可能在 CSS3 中并尝试使用 CSS3 而没有 jquery 来实现
感谢 Imprefectluck ，最后的作品，但我需要再次使用 jquery ，在选择活动更改和相应地更改闪烁。有什么方法可以让元素 2 激活类并将闪烁应用于 3
只用CSS3检查最后一个，不使用任何jquery。

【解决方案2】：

你可以使用 nth-last-type 代替：

.highlight + .highlight:not(.active):nth-of-type(3) {

sn-p：

.highlight {
    color: white;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: rgb(234, 116, 0);
    display: inline-block;
    text-align: center;
}

.active {
    background: green;
}

@keyframes blink {
    to {
        background: rgb(234, 116, 0);
    }
}



.highlight + .highlight:not(.active):nth-of-type(3) {
    color: white;
    background: white;
    animation: blink 2s steps(2, start) infinite;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="steps" style="width:26%;float:left">
    <div class="stepSection">
        <table>
            <tr>
                <td>
                    <div class="highlight active"><span class="glyphicon glyphicon glyphicon-ok"></span></div>
                </td>
                <td>1.</td>
                <td><span>one</span></td>
            </tr>
            <tr>
                <td>
                    <div class="highlight active"><span class="glyphicon glyphicon glyphicon-ok"></span></div>
                </td>
                <td>2.</td>
                <td><span>two</span></td>
            </tr>
            <tr>
                <td>
                    <div class="highlight"><span class="glyphicon glyphicon glyphicon-ok"></span></div>
                </td>
                <td>3.</td>
                <td><span>three</span></td>
            </tr>
            <tr>
                <td>
                    <div class="highlight"><span class="glyphicon glyphicon glyphicon-ok"></span></div>
                </td>
                <td>3.</td>
                <td><span>four</span></td>
            </tr>
        </table>
    </div>
</div>

<div style="width:2%;float:left;">
    <div class="highlight active">1</div>
    <div class="highlight active">2</div>
    <div class="highlight">3</div>
    <div class="highlight">4</div>
</div>

【讨论】：

如果我更改活动类，它不起作用，需要在css中添加所有条件
是的 gaetonM，我正在尝试仅使用 CSS 选择没有活动类的类高亮的第一个元素