列表样式图像大小 - CSS

在 HTML 中，我们可以使用有序列表和无序列表来展示一组相关的项目。通过 CSS，我们可以轻松自定义列表样式，以满足我们的设计需求，其中之一就是更改列表项内的图像大小。

CSS 属性：list-style-image

list-style-image 属性允许我们为列表项设置自定义的图片作为标记。以下是一个简单的示例：

ul {
  list-style-image: url('my-image.png');
}

这将为无序列表中每个列表项添加名为 my-image.png 的自定义图像作为标记。

CSS 属性：width 和 height

如果我们希望更改列表项内的图像大小，可以使用 width 和 height 属性。以下是一个示例：

ul li img {
  width: 50px;
  height: 50px;
}

这将为无序列表中每个列表项内的图像设置宽度和高度为 50 像素。

CSS 选择器

如果我们只想更改特定列表项内的图像大小，可以使用 CSS 选择器来选择特定的元素。例如，以下选择器将选择第一个无序列表的第一个列表项内的图像：

ul:first-of-type li:first-of-type img {
  width: 50px;
  height: 50px;
}

总结

通过使用 list-style-image 属性和 width、height 属性，我们可以轻松地更改列表项内的图像大小，以满足设计需求。同时，CSS 选择器可以帮助我们选择特定的列表项内的元素，以进行更加细致的样式控制。