Question

我有点担心，我怎么能只为直接的孩子添加风格而不是在一些纯文本之后。

实施例。

我的结构如下： 1）

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

如果我为ul添加规则不应该适用。如果我设置背景，那么它不应该在这里应用，因为它在ul“plain txt lorm ipsum”之前有一些文字

和2）

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

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

我没有任何css选择器，想要将样式应用于ul immediate到div，如第2个例子中那样不是第1个。我的意思是在第一个前。在div里面有一些文字然后是ul。在这种情况下，不应该应用样式，并且在第二个ul中立即为div，样式应仅应用于第一个ul。

我尝试了div > ul:first-child，但它适用于两种情况

简而言之，如果div和ul之间有任何文本，样式不应该适用于ul

Answer 1

你可以尝试一些假设你只有n ^（2）孩子

的ul

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

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

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

希望这有帮助。

纯JS解决方案：

＆＃13;

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

＆＃13;

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

＆＃13;

jQuery解决方案：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

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

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

3 个答案: