子要素のCSSスタイルを親のスタイル属性からどのように設定しますか？

例：子要素のCSSスタイルを親のスタイル属性からどのように設定しますか？

<div style="SET IMAGE ATTRIBUTES HERE!"> 
    <img src="http://somesite.com/someimg.jpg"><br /> 
    <img src="http://someothersite.com/someotherimg.jpg"><br /> 
    ... 
</div>

により私の動的なASP.NETのコード生成の構造に、私は事前に定義されたCSSクラスを使用して避けることを好むだろう。これらの属性はWebコントロールごとに異なり、<head>または<body>セクションではグローバルに設定できません。たとえば、1つのページに2つのWebコントロールがあり、それぞれがそれぞれの子イメージ用に異なるCSS属性が設定されているとします。

最後の手段として、これらのコントロール用のダイナミックCSSクラスジェネレータを組み合わせることができますが、それは厄介な結果を伴う巨大な痛みです。つまり、各Webコントロールは独自のCSSクラスを生成し、何らかの形でheadまたはbodyセクションに書きます。複数のWebコントロールがCSSクラスに同じ名前を使用していないことを確認します。私が言ったように、巨大なばかげた混乱 - したがって、私は個々のコントロールの属性タグにすべての情報を詰め込むことができれば、彼らは互いのつま先を踏み外すことはできません。

出典

2010-11-25 Giffyguy

あなたはこのような何か作るんでした：

<div id="yourcontrol_1"> 
    <img src="/some/image.jpg"> 
</div>

、その後、スタイルシートでスタイルを定義する - ないインライン：あなたが唯一の指定どんな

#yourcontrol_1 img { 
    border: 20px double red; 
}

その方法は、そのimgタグに適用されますid yourcontrol_1の子供です。

このレベルの制御は、インラインスタイルIIRCでは使用できません。

クラス名/ IDを事前に決定する方法がない場合でも、それらを生成してstyleタグを使用してスタイルを埋め込むことができます。あなたが言うように、それほど美しいものではありませんが、うまくいくでしょう。

<html> 
    <head> 
    <style> 
     #generated_identifier_0xcafe img { 
      padding: 200em; 
     } 
     #generated_identifier_0xbeef img { 
      background-color: green; 
     } 
    </style> 
    </head> 
    <body> 
    <div id="generated_identifier_0xcafe"> 
     <img src="someimage.png"> 
    </div> 
    <!-- etc... -->

出典

2010-11-25 20:24:31 Piskvor

私はこれが最善の解決策だと思っています。他の回避策は、バグや親に対する制限があるからです。これはおそらく最高の全体的なパフォーマンスを提供するでしょう。 – Giffyguy

子供の属性を設定するための最良の答え。 –

短い答えはできません。

style要素の値は、要素に一致するセレクタを持つルールセット（厳密性を除いて）とまったく同じです。

内部の要素に割り当てられるプロパティの値の唯一の方法は、その要素にルールwhatever-property-it-is: inherit（IEの古いバージョンではバグ）がある場合です。

出典

2010-11-25 20:22:47 Quentin

この場合、それは抜け穴になります。しかし、オプションは、親要素と子要素に同じスタイルを適用するため、非常に限られています（デザインは賢明です）。 – Damien

これはできません。インラインCSSでは、現在の要素のスタイルのみを設定できます。

出典

2010-11-25 20:23:09 Damien

あなたは、単に画像自体にstyle属性を入れて、あなたが望むものを行うためのクラスを必要としません。、

<div> 
    <style scoped>img { border: 20px double red; }</style> 
    <!-- style applies to this div and its children only -->

それは、「製品コードのための準備ができていない」としてマークされていますが、それは、Firefoxで働いていた：

<div> 
    <img src="http://somesite.com/someimg.jpg" style="image styles here!"><br /> 
    <img src="http://someothersite.com/someotherimg.jpg" style="image styles here!"><br /> 
    ... 
</div>

出典

2010-11-25 20:25:21 Orbling

それを考えなかった。スマート。 – Damien

ええ、良い点。しかし、多くのスタイルルールを使ってばかげて繰り返してしまうことがあります。 – Piskvor

@Piskvor確かに、たくさんの画像が同じ詳細を持っていれば、これをやらなければならないというアドバイスはありません。クラスがはるかに良いでしょう。しかし、ポスターは、彼がそれらを避ける必要があると述べているので、これが解決策です。繰返しがほとんどまたはまったくない場合は完全に許容されます。 – Orbling

HTML5は、あなたが望むものを正確に行いますスタイルタグの実験scoped属性を導入していますChrome、Edgeを簡単にテストしました。 HTML Doctorには、wikiコードのテーマプラグインやユーザー定義スタイルなど、いくつかの有効なユースケースがリストされています。

出典

2016-06-24 03:50:52 Noumenon

子要素のCSSスタイルを親のスタイル属性からどのように設定しますか？

答えて

関連する問題