2013-01-03 23 views
19

インラインスタイルの要素を対象とするCSSセレクタはありますか?だから私は最初のスパンをターゲットにすることはできますが、CSSで2番目のものはできませインラインスタイルの要素内の要素のCSSセレクタ?

もしそうでなければ、jQueryでこれを行うことができますか?

http://jsfiddle.net/TYCNE/

<p style="text-align: center;"> 
    <span>target</span> 
</p> 

<p> 
    <span>not target</span> 
</p> 
​ 
+0

によって異なります。インラインスタイル属性の有無だけに関心がありますか、特定のインラインスタイルで選択する必要がありますか?単に属性を持つだけで選択するのは、簡単で信頼性が高いですが、特定のインラインスタイルを持っています...マークアップを制御できない限りはそうではありません。 – BoltClock

答えて

13
p[style="text-align: center;"] { 
    color: red; 
} 

しかし、これは醜いです。

+5

'style'文字列が*完全一致でない限り、失敗します。 –

+0

Davidさんのコメントに加えて1つ。段落に他のスタイリングが関連付けられている場合は、CSS宣言にその段落を含める必要があります。 –

+0

私はIEがそのようなルールを無視した場合があります。 – Vlad

2

使用:

​p[style] span { 
    color: red; 
}​ 
27

少しお茶会に遅れましたが、解決策を共有すると私は考えていました。&が見つかりました。

@ simoneさんの回答は、スタイル属性を正確に一致させることができれば完璧です。しかし、あなたが使用することができ、それに関連する他のインラインスタイルを持っていることがあり、インラインスタイル属性ターゲットにする必要がある場合:

p[style*="text-align:center;"] 

「* =」「属性の任意の場所に次の値が一致することを意味し 値を。 "さらに参照または他のセレクタの詳細については

css-tricks.comにこのブログの記事を参照してください。

スキニーCSSセレクタ

http://css-tricks.com/attribute-selectors/#rel-anywhere

4

では、あなたが希望した場合特定のルール宣言にスタイルを適用する場合は、style *を使用することもできます。これは、適用された値にかかわらず、インラインスタイルを持つすべての要素と一致します。

div[style*="background-image"] { 
    background-size: cover; 
    background-repeat: no-repeat; 
}