css - 样式跨度元素跟随另一个跨度，中间没有文本内容

Question

我想创建 CSS 规则来设置样式 span紧跟在其他跨度之后并且它们之间没有文本内容的元素。所以我想要样式 <span class="bar">Second</span>在这个例子中:

<span class="parent">
  <span class="foo">First</span>
  <span class="bar">Second</span> <!-- this one! -->
</span>
<span class="parent">
  <span class="foo">Third</span>
  Some text.
  <span class="bar">Fourth</span> <!-- but not this! -->
</span>

我试过同时使用 + ( adjacent ) 和 ~ ( general ) 组合器没有成功:

/* colours both "Second" and "Fourth" */
span.foo+span.bar {
  color: red;
}

我也试过一些伪类:

/* colours "Third", "Some text." and "Fourth" */
span.parent :only-of-type {
  color: red;
}

我正在寻找一些纯 CSS 的工作解决方案。它可能会使用实验性功能(如 :has )，但 Chrome 浏览器必须支持它们。

Answer 1

除非开口<span>紧接着之前的关闭 </span>像这样:

<span>...</span><span>...</span>

总是会有一个textnode跨度之间 - 即使没有可读文本，仍然会有空白。

因此，您需要检查两个条件:

• 是在 <span> 之前的元素 ...一个<span> ？
• 是textnode 紧接 在 <span> 之前...只是空格(或不存在)？

如果这两个条件都是true , 然后你可以动态添加一个类到 <span>正在审查中。

工作示例:

var parents = document.getElementsByClassName('parent');

for (var i = 0; i < parents.length; i++) {
    var spans = parents[i].getElementsByTagName('span');
    
    for (var j = 1; j < spans.length; j++) {

        // Checks preceding textNode for readable text
        var followsWhitespace = (/^\s*$/).test(spans[j].previousSibling.textContent);

        // Just in case there is no preceding textNode at all
        if (spans[j].previousSibling.nodeName === 'SPAN') {
            followsWhitespace = true;
        }

        // Identifies preceding element
        var previousElementName = spans[j].previousElementSibling.nodeName;

        if ((previousElementName === 'SPAN') && (followsWhitespace === true)) {
            spans[j].classList.add('follows-span');
        }
    }
}

.follows-span {
font-weight: bold;
color: rgb(255, 0, 0);
}

<span class="parent">
  <span class="foo">First</span>
  <span class="bar">Second</span> <!-- this one! -->
</span>
<span class="parent">
  <span class="foo">Third</span>
  Some text.
  <span class="bar">Fourth</span> <!-- but not this! -->
</span>