樣式跨度元素跟在另一個跨度之間沒有文字內容

Question

我想創建CSS規則樣式span元素，它緊跟其他一些跨度，並且它們之間沒有文本內容。所以，我想在這個例子中的風格<span class="bar">Second</span>：

/* 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瀏覽器支持。

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>