Question

我希望能够拥有两个具有不同属性的img类。例如在css中我希望：

img {
  padding-left: 15pt;
  float: right;
}

然后：

img1 {
  padding-left: 15pt;
  float: left;
}

其中img1应该是图片的标记，所以我可以在html中使用它，例如：

<img1 src="myimage.png" alt="m"/>

我该怎么做？

Answer 1

您使用的 ~~<img1 />~~ 无效的HTML标记，为了唯一地选择元素，我们定义class或{{1对于元素，即使由于某种原因您不想定义id或class，您也可以为元素定义Custom Attributes，前缀为{{} 1}}但无法定义 自定义HTML元素，..

为每个id代码定义data- .. （声明class，确保它们对于每个代码都是唯一的，您不能在多个img上使用相同的id元素。）

id

而不是像

那样编写各自的CSS

<img src="" class="img1" />
<img src="" class="img2" />

假设您要为两者声明共同属性，使用逗号对它们进行分组，然后重新声明其他.img1 { /* Selects element having a class of .img1 */ } .img2 { /* Selects element having a class of .img2 */ }的唯一属性，如

class

如果您不打算为每个.img1, .img2 { padding-left: 15pt; /* Other common properties goes here */ } .img2 { /* Unique properties for .img2 */ }代码分配class，则可以使用img或:nth-of-type伪来选择每个:nth-child，但请确保使用img或div您认为合适的任何内容包裹它们

假设我们将它们包含在section标记内，并指定div说class

.container

所以在这里你可以选择第一个<div class="container"> <img src="" /> <img src="" /> </div>作为

img

请注意：这些CSS3伪，但这些被广泛支持，但像往常一样，旧的IE版本，就会破坏游戏，虽然polyfills是可用的，但最终，你必须决定你要选择什么

此外，如果您不了解特异性，我在上面定义的每个选择器中的特异性都很重要，而不是快速阅读here ......

Answer 2

您无法在html中定义自定义标记，应该使用CSS类来完成您想要完成的任务。

<img class=img1 src="myimage.png" alt="m"/>
<img class=img2 src="myimage2.png" alt="m"/>

.img1 {
  padding-left: 15pt;
  float: left;
}

.img2 {
  padding-left: 15pt;
  float: right;
}

img在css中有两个不同的属性

2 个答案: