如何将样式应用于即时标签而不是在文本之后

Question

我有点担心，我只能在直接的孩子而不是在某些纯文本之后添加样式。

ex。

我有类似的结构：1）

<div>
plain text lorm ipusm
<ul><li>test content</li></ul>
<ul><li>test content</li></ul>
</div>

如果我添加UL规则，则不应适用。如果我设置了背景，则不应在此处应用，因为它在ul" plain txt lorm ippum"

之前有一些文本

和2）

<div>
<ul><li>test content</li></ul>
<ul><li>test content</li></ul>
</div>

如果我添加UL规则，则应适用于此UL，因为它之前没有文本。

我没有任何CSS选择器，想要将样式应用于UL即时以DIVdiv，如第二个示例中所不像第1示例一样。我的意思是在第一个前。内部有一些文字，然后是UL。在这种情况下，不应应用样式，并且在第二个UL中立即进行DIV，样式应仅适用于第一个UL。

我尝试过div > ul:first-child，但在两种情况下都适用于

简而

您可以尝试以假设您将只有ul为n^th（2）儿童

div:nth-child(2) >ul:first-child{
  color : red;
}

<div>
plain text lorm ipusm
<ul><li>test content</li></ul>
<ul><li>test content</li></ul>
</div>
========================================
<div>
<ul><li>test content</li></ul>
<ul><li>test content</li></ul>
</div>

使用first-of-type。它可以与父母一起使用，因此只有立即效果出现标签。

div>ul:first-of-type {
  background: tomato;
}

<div>
  <ul>
    <li>test content</li>
  </ul>
  <ul>
    <li>test content</li>
  </ul>
</div>
<br/>
<br/>
<div>
  plain text lorm ipusm
  <ul>
    <li>test content</li>
  </ul>
  <ul>
    <li>test content</li>
  </ul>
</div>

您可以检查DIV是否具有立即文本，然后决定添加样式，例如：

$("div").each(function(){
  if( $(this).clone().children().remove().end().text().trim() !== ""){
    console.log('Do not add style');
  }else{
    console.log('Add style');
  }
});

希望这会有所帮助。

纯JS解决方案：

var divs = document.querySelectorAll('div');
for (var i = 0; i < divs.length; i++) {
  var element = divs[i], text = '';
  for (var j = 0; j < element.childNodes.length; ++j)
    if (element.childNodes[i].nodeType === 3)
      text += element.childNodes[j].textContent;
  if (text.trim() === "") {
    element.querySelector('ul').style.backgroundColor = 'green';
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  plain text lorm ipusm
  <ul>
    <li>test content</li>
  </ul>
  <ul>
    <li>test content</li>
  </ul>
</div>
<div>
  <ul>
    <li>test content</li>
  </ul>
  <ul>
    <li>test content</li>
  </ul>
</div>

jQuery解决方案：

$("div").each(function(){
  if( $(this).clone().children().remove().end().text().trim() === ""){
    $('ul:first-of-type',this).css('background-color','green');
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  plain text lorm ipusm
  <ul><li>test content</li></ul>
  <ul><li>test content</li></ul>
</div>
<div>
  <ul><li>test content</li></ul>
  <ul><li>test content</li></ul>
</div>