2016-04-07 11 views
4

これは私のサンプルHTMLです。特定のdiv要素内にないpタグの否定ルール

<html> 
<head> 
</head> 
<body> 
<div> 
<p>Text with red color</p> 
</div> 
<div id="temp"> 
<div style="margin:0px"> 
<p> 
Text without red color 
</p> 
</div> 
</div> 
</body> 
</html> 

"id = temp"のdiv内にないすべてのp要素に "color:red"を適用します。

私は以下のようなCSSの否定を使用したが運:CSS :not()擬似セレクタはID、クラス、要素やタグ名などの単純な一つの要素セレクタでのみ動作しますので、

p:not(div[id="temp"] p){ 
color:red; 
} 

答えて

2

そのような選択はありませんその他の類似点。

MDNのドキュメントは言う:

否定CSS擬似クラス:ていない(X)は、引数ような単純なセレクタXを取る関数表記あります。引数で表されていない要素と一致します。 Xに別の否定セレクタを含めてはいけません。

https://developer.mozilla.org/en/docs/Web/CSS/:not

だから私はの考えている唯一の方法は、あなただけあなたが無視したい要素に一致する優先度の高いCSSセレクタを選択しないようにしたい要素のスタイルを上書きすることです。

例リンク:http://codepen.io/anon/pen/MyrKKW?editors=1000

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <title>CSS Selector</title> 
    <style> 
    p { 
     color: red; 
    } 

    #temp p { 
     color: initial; 
    } 
    </style> 
</head> 
<body> 
    <p>Praesent nonummy mi in odio.</p> 
    <div id="temp"> 
    <p>Inside #temp div: fusce neque. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p> 
    <p>Another p inside #temp div: raesent blandit laoreet nibh. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p> 
    </div> 
    <div> 
    <p>Inside other div: proin sapien ipsum, porta a, auctor quis, euismod ut, mi. Donec mollis hendrerit risus.</p> 
    </div> 
</body> 
</html> 
3

私はあなたがこれをしたいと考えている:https://jsfiddle.net/9n3jm4bg/1/

:not(#temp) > p { color:red; } 
+3

「div」要素に含まれない「p」要素は選択されません。 – MNR

+1

正しいですが、提供されたコードでは、各pはdiv内にあります。だから私はこれが状況のために働くと思います。 – Thomas

+3

Nasir氏によると、あなたのルールはdiv要素から外れているp要素を選択しません。私は内部にあるもの以外のすべてのp要素を選択する必要があるルールを必要としています。「id tempを持つdiv」 –

1

は、あなたが望むどのようにということですか? https://jsfiddle.net/Lg0zL3wd/1/

div:not(#temp) p{ 
color:red; 
} 

<div id="temp"> 
    <p>text without red</p> 
</div> 
<div> 
    <p>text with red</p> 
    <p>text with red</p> 
</div> 
+0

ありがとうデンマーク語。あなたのルールは機能しません。あなたのルールは、div要素から外れているp要素を選択しません。私は、idのtempを持つdivの中にあるもの以外のすべてのp要素を選択する必要があります。 –

+0

その場合は、Nasirのようなものではなく、通常のCSSでこれを達成できます。 –

関連する問題