問題描述

我想在下面的 HTML 片段中選擇 BONKERS.它的區別在于它在 <code> 塊中是單獨的，而它的所有兄弟都包含 <a> 的.:empty 是顯而易見的選擇，但由于文本節點而無法使用.我以為我知道這些東西，但這讓我發瘋了.

I want to select BONKERS in the HTML fragment below. Its distinction is that it's alone in a <code> block whereas all its siblings contain <a>'s. :empty is the obvious choice, but won't work due to the text node. I thought I knew this stuff but this is driving me, well, bonkers.

 <ul class="Reference">
    <li class="level4">
        <code class="active-voice">
            <a href="some/url/x" version="2">
                mauve 
            </a>
    </code>
    <li class="level8">
        <code class="active-voice">
            BONKERS 
        </code>
    </li>
    <li class="level9 subclass">
        <code class="active-voice">
            <a href="some/url/c" version="2">
                cerise 
            </a>
    </code>
    </li>
</ul>

我需要一個純 CSS 解決方案(JS 不是一個選項)，并且無法控制源 HTML.

I need a pure CSS solution (JS isn't an option), and have no control over the source HTML.

呸！

推薦答案

你可以按照這個方法.通過您想要的任何 CSS 設置 code 元素的樣式，然后重置那些在 anchor 的樣式中可繼承的 CSS 樣式，即:

You can follow this approach. Style the code elements by whatever CSS you want and then reset those CSS styles which are inheritable in anchor's styles i.e.:

演示:http://jsfiddle.net/GCu2D/1062/

CSS:

code {
    color: green;
    font-weight: bold;
}
code a{
    color: red;/*Reset any inheritable css*/
    font-weight: normal; /*Reset any inheritable css*/
}

您可能不需要重置所有樣式，因為并非所有樣式都由 anchor 從 code 元素繼承

You might not need to reset all styles because not all styles are inherited by anchor from the code element

這是您真正可以考慮的一種解決方案.

This is one solution which you can really consider.

這篇關于無子但非空的 CSS 選擇器的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網！