Question

示例：

<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控件，每个web控件都为其所有子图像设置了不同的CSS属性。

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

Answer 1

简短的回答是你不能。

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

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

Answer 2

你可以做这样的事情：

 <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... -->

Answer 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>

Answer 4

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

Answer 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代码上的主题插件和用户定义的样式。

如何在父级样式属性中设置子元素的CSS样式？

5 个答案: