如何从父元素的样式属性中设置子元素的 CSS 样式？答案

【问题标题】：How do you set the CSS styles of child elements from within the parent's style attribute?如何从父元素的样式属性中设置子元素的 CSS 样式？
【发布时间】：2011-05-15 21:36:47
【问题描述】：

例子：

<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> 部分中全局设置。例如，我可能在一个页面上有两个 Web 控件，每个控件都为其所有子图像设置了不同的 CSS 属性。

作为最后的手段，我可以为这些控件拼凑一个动态的 CSS 类生成器——但这将是一个巨大的痛苦，而且结果非常草率。也就是说，每个 web 控件都会生成自己的 CSS 类，以某种方式将其写入 head 或 body 部分，同时确保多个 web 控件的 CSS 类不使用相同的名称。就像我说的那样，一团糟——因此我希望能够将所有这些信息塞进各个控件的属性标签中，这样它们就不会互相踩踏。

【问题讨论】：

标签： html css asp.net

【解决方案1】：

你能做这样的事情吗：

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

然后在样式表中定义样式 - 不是内联：

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

这样，您指定的任何内容都仅适用于作为 id yourcontrol_1 子代的 img 标签。

内联样式 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... -->

【讨论】：

总而言之，我认为这是最好的解决方案，因为其他解决方法是错误的或对父级施加限制。这也可能提供最佳的整体性能。
设置子属性的最佳答案。

【解决方案2】：

简短的回答是你不能。

样式元素的值完全等同于具有匹配该元素的选择器的规则集（除非具有更高的特异性）。

将属性值分配给内部元素的唯一方法是该元素是否具有规则whatever-property-it-is: inherit（这在旧版本的 IE 中存在缺陷）。

【讨论】：

是的，在这种情况下，这将是一个漏洞。但是选项非常有限（设计方面），因为您将对父元素和子元素应用相同的样式。

【解决方案3】：

你不需要类来做你想做的事，只需将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>

【讨论】：

是的，好点。但是，使用大量样式规则可能会变得荒谬地重复。
@Piskvor 绝对是这样，如果大量图像具有相同的细节，我绝不建议必须这样做，一个类会更好。然而，张贴者说他需要避免它们，所以这就是解决方案。如果没有重复或重复很少，完全可以接受。

【解决方案4】：

这是不可能的。使用内联 CSS，您只能为当前元素设置样式。

【讨论】：

【解决方案5】：

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 代码上的用户定义样式。

【讨论】：