Question

使用下面的代码，我能够突出显示值为2和3而不是元素3的元素。我尝试使用最后一个子节点和nth-last-type但是没有按预期工作。问题是突出显示类的紧急下一个元素 - 活动并应用闪烁标记3和值3以及更改活动类以更改闪烁

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

我试图在没有使用CSS的活动类的情况下选择类hightlight的第一个元素

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;
}

Answer 1

方法1：Jquery 您可以使用jquery这样做

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

将你的CSS更改为闪烁等级

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

Working Js fiddle

方法2： 如果你只想使用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>

然后你喜欢

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

方法3：

将您的CSS更改为

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

基本上它会找到在它之前有活动类的元素和没有活动类的下一个类。

working jsfiddle

Answer 2

您可以使用：

代替nth-last-type

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

摘录：

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

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

2 个答案: