仅针对一种文件类型的类或 ID 中的 CSS 选择器

Question

我是 CSS 新手（非常新，第三天），并且到处搜索有相同查询的人，但我没有找到任何东西。到目前为止，我已经尝试为图像创建一个类或 id，并且在该类/id 中，我希望一种特定的文件类型 (.gif) 的大小与其他图像类型不同。我抓狂了，我不知道如何选择文件类型的任何实例，而不是特定的 gif。

我已经尝试过 :target，但我不确定如何定位文件类型而不是具有特定名称的 url。

我最新的努力是这样的（我也尝试过在具有相同内容的 gif 之上为 jpg 和 png 提供相同的特定代码，但它不起作用）：

.items {
        clear: both;
        display: flex;
        position: relative;
        width: 100%;
        max-width: 200px;
            height: auto;
        max-height: 100%;
        object-fit: contain;
        margin: 5px;
        img[href*='.gif'] {
            width: 100%;
            max-width: 80px;
                height: auto;
            max-height: 100%;
            object-fit: contain;
            margin: 5px;
        }
}

我所期望的是该类中的所有图像都具有一种样式，除了 gif 之外，它们具有另一种样式。我得到的是应用的 .items 类，而不是 gifs 选择器。那么，是否可以在此类中仅选择 .gif？

有人可以告诉我我做错了什么，或者根本不可能将其包含在课程中，或者什么？我有一个 javascript 脚本文件夹，但不知道如何编写必要的脚本（其中有一些用于交换 20 年前某人给我的图像的遗留代码）。我的文件结构是：

命名文件夹 索引.html 子文件夹：_CSS _文件夹名称 styles.css _文件夹名称scripts.js 子文件夹：文件夹名称 images/cast/items 图像X.jpg 图像Y.png imageZ.gif

Answer 1

您可以选择属性等于

的html对象

img[src="something"] {
    /* Your styles here */
}

但是由于您只需要按文件扩展名进行选择，因此可以使用

$=

，如下所示

img[src$=".gif"] {
    /* Your styles here */
}