如何在父級的style屬性中設置子元素的CSS樣式？

實施例：如何在父級的style屬性中設置子元素的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類。這些屬性因網絡控制而異，不能在<head>或<body>部分全局設置。例如，我可能在單個頁面上有兩個Web控件，每個頁面都爲其所有子圖像設置了不同的CSS屬性。

作爲最後的手段，我可以將這些控件的動態CSS類生成器拼湊在一起 - 但這將是一個巨大的痛苦，其結果非常潦草。也就是說，每個webcontrol都會生成自己的CSS類，以某種方式將其寫入head或body部分，同時確保多個webcontrols的CSS類不使用相同的名稱。就像我說的那樣，一個巨大的雜亂無章的混亂 - 因此我希望能夠將所有這些信息都塞進個別控件的屬性標籤中，這樣他們就不會踩到彼此的腳趾。

來源

2010-11-25 Giffyguy

你能不能讓這樣的事情：

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

，然後在樣式表中定義樣式 - 不是內聯：

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

這樣一來，無論你只能指定適用於img標記，是編號爲yourcontrol_1的孩子。

這種級別的控制對於內聯式IIRC是不可能的。

如果您無法事先確定classname/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 2010-11-25 23:33:03

設置兒童屬性的最佳答案。 – 2012-07-24 19:19:12

簡短的答案是你不能。

樣式元素的值完全等同於具有與元素匹配的選擇器的規則集（除了具有更高的特異性）。

如果該元素的規則爲whatever-property-it-is: inherit（這是IE舊版本中的bug），那麼將值分配給元素內部屬性的唯一方法是。

來源

2010-11-25 20:22:47 Quentin

是的，在這種情況下，這將是一個漏洞。但是這些選項非常有限（設計上比較明智），因爲您將對父元素和子元素應用相同的樣式。 – Damien 2010-11-25 20:24:35

這是不可能的。使用內聯CSS，您只能爲當前元素設置樣式。

來源

2010-11-25 20:23:09 Damien

你不需要班級去做你想做的事，只需將style屬性放在圖片上。

<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

HTML5已經推出了風格標記，它會做你想要什麼實驗scoped屬性：

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

它標記爲「未準備好生產代碼」，但它在Firefox的工作， Chrome和Edge在我剛做的簡單測試中。 HTML Doctor列出了幾個有效的用例，例如wiki代碼上的主題插件和用戶定義樣式。

來源

2016-06-24 03:50:52 Noumenon

如何在父級的style屬性中設置子元素的CSS樣式？

回答

相關問題