色婷婷狠狠18禁久久YY,CHINESE性内射高清国产,国产女人18毛片水真多1,国产AV在线观看

CSS樣式不影響黑色主題

CSS

我嘗試使用:n-of-type來突出顯示基于其類和索引的特定元素。

.verse {
  display: block;
  margin-top: 2em;
  margin-bottom: 2em;
}

.line {
  display: block;
}

.word {
  display: inline;
}

.beat {
  display: inline;
}

.verse .line .beat:nth-of-type(3) {
  border-width: 1px;
  border-color: yellow;
  border-style: solid;
}

<div class="song">
  <div class="verse">
    <div class="line">
      <div class="word">
        <div class="beat">His</div>
        <div class="beat">t'ry</div>
      </div>
      <div class="word">
        <div class="beat">for</div>
      </div>
      <div class="word">
        <div class="beat">10's</div>
      </div>
      <div class="word">
        <div class="beat">ans</div>
        <div class="beat">wer</div>
      </div>
      <div class="word">
        <div class="beat">is</div>
      </div>
    </div>
  </div>
</div>

CSS類beat沒有n-of-type(3)。計(jì)數(shù)是從父項(xiàng)而不是從所有出現(xiàn)次數(shù)中得出的，如果您想達(dá)到您想要的效果，請去掉所有& ltdiv class = & quotword & quot& gt定義，并且只對所有定義使用一個(gè)，就像這樣

.verse {
    display: block;
    margin-top: 2em;
    margin-bottom: 2em;
}

.line {
    display: block;
}

.word {
    display: inline;
}

.beat {
    display: inline;
}

.verse .line .beat:nth-of-type(3)
{
    border-width: 1px;
    border-color: red;
    border-style: solid;
}

<html>
  <body>
    <div class="song">
      <div class="verse">
        <div class="line">          
          <div class="word">
            <div class="beat">His</div>
            <div class="beat">t'ry</div>
            <div class="beat">for</div>
            <div class="beat">10's</div>
            <div class="beat">ans</div>
            <div class="beat">wer</div>              
            <div class="beat">is</div>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

n-of-type()查找其父元素的第n個(gè)相同類型(標(biāo)記名)的子元素。 如你所愿。詩句。線。beat:n-of-type(3)它搜索第三個(gè)。節(jié)拍類。這是單親父母所沒有的。

因?yàn)槲艺J(rèn)為你想選擇第三個(gè)。擊敗全球。你可以通過Javascript來實(shí)現(xiàn)。

const beatElement = document.querySelectorAll(".beat");

beatElement[2].classList.add("beat-highlight");

CSS:

.beat-highlight
{
    border-width: 1px;
    border-color: yellow;
    border-style: solid;
}

向上投票讓我快樂:)