Question

我正在尝试根据选定的类更改段落的样式。例如，我有一个包含p元素列表的文本。根据一些规则，我使用类'alert'更改单个p元素的样式。在这种情况下，我希望它之后的所有段落都具有独特的风格。这同样适用于另一类“危险”。警报首先出现，危险排在第二位。两者都是可选的。两者都可以通过其他段落进行，这些段落既不危险也不警示。这是一个例子

<div class='text'>

<p>Some paragraph0</p>

<p class="alert">Alert</p>
<p>Some paragraph1</p>
<p>Some paragraph2</p>

<p class="danger">Danger</p>
<p>Some paragraph3</p>
<p>Some paragraph4</p>

</div>

我希望样式更改为p之后带有类警报或危险的元素的问题。所以，我可以选择在课前危险或警告之后或之前申请。

.alert{
   background: #FFFF00;
    font-weight: bold;
}

.danger{
    background: #F00;
    font-weight: bold;
}

Answer 1

您可以使用〜选择器，它可以选择危险或警告之前的元素。我遵循你在案件中的假设。这个逻辑存在的问题是它不能正常处理多个警告或危险。

div.text p.alert ~ p:not(.danger), div.text p.alert {
    background: #FFFF00;
}

div.text p.danger ~ p:not(.alert), div.text p.danger {
    background: #F00;
}

div.text p.alert{
    font-weight: bold;
}

div.text p.danger{
    font-weight: bold;
}

Answer 2

你可以像这样定位他们......

.alert p:not(:first-child) {color:orange;}

.danger p:not(:first-child) {color:purple;}

Answer 3

这是一般兄弟选择器的作业！

//...

$data = array_values($data);

echo json_encode($data);

Answer 4

您可以使用javascript来完成任务。这可以在 all situations 中使用。

适用于包含class="text"或class alert或两者的一个元素的class danger元素。

如果有no elements class alert或class danger，则不会发生任何事情。

以下是代码：（运行代码段）

注意：我正在给targeted elements example class specialClass，而simulate adding styles {{1}底部有两个按钮}}和before after或alert。

＆＃13;

danger

＆＃13;

function applyStyles(whenToStyle)
{
  // get all elements with class 'text'
  var elements = document.querySelectorAll('.text');
  
  // go through all elements with class 'text'
  for(var i=0; i< elements.length; i++)
  {
    // set all to false for new container of class 'text'
    var alertSeen = false;
    var dangerSeen = false;
    var hasAlert = false;
    var hasDanger = false;
    
    // get the children in order as they appear on the page
    var children = elements[i].children;
    
    // check if elements with class 'alert' or 'danger' exist
    if(elements[i].getElementsByClassName('alert').length > 0) hasAlert = true;
    if(elements[i].getElementsByClassName('danger').length > 0) hasDanger = true;
    
    // go through all children elements of the selected element
    for(var j=0; j< children.length; j++)
    {
      // if the classList doesn't contain 'alert' or 'danger'
      if(!children[j].classList.contains('alert') && !children[j].classList.contains('danger'))
      {
          if(whenToStyle == 'before')
          {
            if((!alertSeen && hasAlert) || (!dangerSeen && hasDanger))
            {
              children[j].classList.add('specialClass');
            }
          }
          else if(whenToStyle == 'after')
          {
            if((alertSeen && hasAlert) || (dangerSeen && hasDanger))
            {
              children[j].classList.add('specialClass');
            }
          }
      }
      else
      {
        // mark if we are on an element with class 'alert' or 'danger'
        if(children[j].classList.contains('alert')) alertSeen = true;
        else if(children[j].classList.contains('danger')) dangerSeen = true;
      }
    }
  }
}

＆＃13;

.alert{
   background: #FFFF00;
    font-weight: bold;
}

.danger{
    background: #F00;
    font-weight: bold;
}

.specialClass
{
  background-color:#09f;
  color:#FFF;
  font-size:1.3em;
}

＆＃13;

突出显示基于类的段落

4 个答案: