Question

我想创建CSS规则来设置span个元素，这些元素会紧跟其他某个范围，并且它们之间没有文本内容。所以我想在这个例子中设置Second样式：

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

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

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

是元素，位于 ... 之前？
是textnode，立即在之前......只是空格（或缺席）？

如果这两个条件都是true，那么您可以动态地将一个类添加到正在审核的中。

工作示例：

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

样式跨度元素在另一个跨度之后没有文本内容

1 个答案: