样式跨度元素跟在另一个跨度之间没有文字内容

我想创建CSS规则样式span元素，它紧跟其他一些跨度，并且它们之间没有文本内容。所以，我想在这个例子中的风格Second：样式跨度元素跟在另一个跨度之间没有文字内容

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

而且我已经尝试了一些伪类：

<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 "Third", "Some text." and "Fourth" */ 
span.parent :only-of-type { 
    color: red; 
}

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

来源

2017-10-12 Grzegorz Adam Kowalski

不幸的是，这是不可能只使用CSS – sol

的答案使用jQuery https://stackoverflow.com/questions/看的类似的问题11198007 /选择 - 邻接 - 兄弟 - 无干涉 - 文本节点 –

@SureshPonnukalai，谢谢，这是一个类似的问题。但是5年前有人问到，从那以后可能有什么变化？ –

除非开幕紧跟这样的前收盘：

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

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

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

是元素这之前的 ......一个？
是textnode其中立即先于 ...只是空白（或缺席）？

如果这两个条件都true，那么你就可以动态地将类添加到下检查。

工作实例：

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>

来源

2017-10-12 14:33:43 Rounin

样式跨度元素跟在另一个跨度之间没有文字内容

回答

相关问题