CSS：沒有（）上的所有後代

我怎樣才能做到這一點選擇的是：不是（） - 在下面的例子中選擇的作品？CSS：沒有（）上的所有後代

HTML

<div id="content"> 
    <div id="one"> 
    <div><p>This is a <a href="">link</a>.</p></div> <!-- should be green --> 
    <div><p>This is a <a href="">link</a>.</p></div> <!-- should be green --> 
</div> 
    <div id="two"> 
    <div class="mystyle"><p>This is a <a href="">link</a>.</p></div> <!-- should NOT be green --> 
    <div><p>This is a <a href="">link</a>.</p></div> <!-- should be green --> 
</div> 
</div>

CSS

#content a:not(.mystyle) { 
    color: green; 
}

的jsfiddle

Link to jsfiddle

重要

我想在我的博客上設置外部窗口小部件的樣式。我無法訪問它的HTML，因此更改HTML不是一種選擇。我正在尋找一個僅限CSS的解決方案。

來源

2017-03-01 Sr. Schneider

能否請您解釋一下你想在這裏做什麼？ – Soviut

有四個鏈接。除了一個例外，所有鏈接都應該是綠色的：班級中的鏈接=「mystyle」。 –

你的小提琴與你問題中的代碼完全不同 – j08691

在您的例子中，選擇器:not()被施加到a元件。這隻會選擇a標籤，其上沒有.mystyle類。

#content > * > *:not(.mystyle) a { 
    color: green; 
}

以上將選擇任何後代2個水平下沒有一個.mystyle類，然後選擇顏色所有的decendant a標記爲綠色。

下面是一個工作示例：

#content > div > div:not(.mystyle) a { 
 
    color: green; 
 
}

<div id="content"> 
 
    <div id="one"> 
 
    <div><p>This is a <a href="">link</a>.</p></div> <!-- should be green --> 
 
    <div><p>This is a <a href="">link</a>.</p></div> <!-- should be green --> 
 
</div> 
 
    <div id="two"> 
 
    <div class="mystyle"><p>This is a <a href="">link</a>.</p></div> <!-- should NOT be green --> 
 
    <div><p>This is a <a href="">link</a>.</p></div> <!-- should be green --> 
 
</div> 
 
</div>

來源

2017-03-01 18:13:58 Soviut

有四個環節。除了一個例外，所有鏈接都應該是綠色的：班級中的鏈接=「mystyle」。

那你爲什麼要用:not()？只要給現有班級塗上顏色即可。

* { color: green; } 
 

 
.mystyle * { color: red; }

<div id="content"> 
 
    <div id="one"> 
 
    <div><p>This is a <a href="">link</a>.</p></div> <!-- should be green --> 
 
    <div><p>This is a <a href="">link</a>.</p></div> <!-- should be green --> 
 
</div> 
 
    <div id="two"> 
 
    <div class="mystyle"><p>This is a <a href="">link</a>.</p></div> <!-- should NOT be green --> 
 
    <div><p>This is a <a href="">link</a>.</p></div> <!-- should be green --> 
 
</div> 
 
</div>

來源

2017-03-01 18:10:24

看起來像我要發佈的答案; http://codepen.io/anon/pen/LWGygY？編輯= 1100 – Bhavik

我想風格的外部部件（我沒有訪問它的HTML，所以更改HTML不是一個選項！）。 –

我的答案不會改變HTML。你是說「mystyle」課程不存在嗎？ –

這樣呢？：

div:not(.mystyle) > p > a { color: green; }

<div id="content"> 
 
    <div id="one"> 
 
    <div><p>This is a <a href="">link</a>.</p></div> <!-- should be green --> 
 
    <div><p>This is a <a href="">link</a>.</p></div> <!-- should be green --> 
 
</div> 
 
    <div id="two"> 
 
    <div class="mystyle"><p>This is a <a href="">link</a>.</p></div> <!-- should NOT be green --> 
 
    <div><p>This is a <a href="">link</a>.</p></div> <!-- should be green --> 
 
</div> 
 
</div>

來源

2017-03-01 18:28:58 Johannes

要做到這一點，你可以在下面的代碼片段檢查的一種方式。

div:not(.calc) > p { 
 
    color: green; 
 
}

<div id="content"> 
 
<div><p>Hi</p></div> 
 
<div ><div class="calc"><p>Hi</p></div></div> 
 
<div><p>Hi</p></div> 
 
</div>

來源

2017-03-01 18:31:06

CSS：沒有（）上的所有後代

回答

相關問題