CSS 选择非常直接的子项

Question

是否可以选择元素First但不能选择Second？

<p> <code>first</code> </p>
<p> Text <code>second</code> Text </p>

我打算在<code>的子项<p>但没有内容(空格除外(时选择<p>

我想在没有 JS 的情况下做到这一点，如果不可能，那也是一个答案，如果它解释

Answer 1

你可以在jQuery中使用过滤器来做到这一点：

$('p').filter(function() {
  var nodetoCheck = $(this).contents()[0];
  if ($(this).contents()[0].nodeValue.trim() === '') {
    nodetoCheck = $(this).contents()[1];
  }
  if (nodetoCheck.nodeType === 1) {
    return true;
  }
}).addClass('selected');

JSfiddle 示例：https://jsfiddle.net/jennifergoncalves/eywk7b53/1/

Answer 2

p:first-child > code {
  color:#fff;
  background:tomato;
}

<p> <code>first</code> </p>
<p> Text <code>second</code> Text </p>

还包括小提琴代码，如果你用jquery做的话

工作小提琴