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

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

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

然后：

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

其中，

img1

应该是图像的标记，因此我可以在html中使用它，例如：

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

---

我该怎么做呢？

您不能在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;
}

.img1{
左：15磅；
浮动：左；
}
.img2{
左：15磅；
浮动：对；
}

您正在使用的

是无效的HTML标记，为了唯一地选择元素，我们为元素定义

类

或

id

，即使出于某种原因您不想定义

类

或

id

，您也可以定义元素，前缀为

data-

，但不能定义自定义HTML元素

为每个

img

标记定义

class

。。（声明

id

，确保每个元素都是唯一的，不能在多个元素上使用相同的

id

。）

---

假设要为这两个类声明公共属性，请使用逗号将它们分组，然后重新声明另一个类的唯一属性

.img1 {
   /* Selects element having a class of .img1 */
}

.img2 {
   /* Selects element having a class of .img2 */
}

如果您不想为每个

img

标记分配

class

，那么您可以使用

:n类型的
:n或
:n子类型的
伪来选择每个
img
，但请确保使用
div
或
部分来包装它们，只要您觉得合适

假设我们将它们包装在一个
div
标记中，并分配一个
class
比如
.container

.img1, .img2 {
   padding-left: 15pt;
   /* Other common properties goes here */
}

.img2 {
   /* Unique properties for .img2 */
}

注意：这些都是CSS3伪版本，但是它们得到了广泛的支持，但是像往常一样，旧的IE版本会破坏游戏，虽然polyfills是可用的，但是最后你必须决定你想要选择什么

此外，在我上面定义的每个选择器中，如果您不知道特定性，请快速阅读…
只需定义样式
img1
，并在HTML代码中使用它作为
，这应该会起作用！
.img1, .img2 {
   padding-left: 15pt;
   /* Other common properties goes here */
}

.img2 {
   /* Unique properties for .img2 */
}

<div class="container">
    <img src="" />
    <img src="" />
</div>

.container img:nth-of-type(1) {
   /* Properties here will apply to first img tag nested inside element having
      class of .container */
}

.container img:nth-of-type(2) {
   /* Properties here will apply to second img tag nested inside element having
      class of .container */
}