如何在父级的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样式？

回答

相关问题