带有 id 和 class 的 CSS

Question

大家好。

在我制作的一个网站中，我对 css 有一种奇怪的 react 。

有这段代码

<a class="instagram-photo image" id="p1130472628000663001_176824616" href="PROFILE" target="_blank" data-name="NAME" data-caption-std="Colors #thefeditor" data-caption="Colors #thefeditor <a target=&quot;_blank&quot; href=&quot;INSTA LINK;>View Photo</a> " data-created="1448982860" data-author="AUTHORNAME" data-likes="87" data-comments="0" data-profile="PROFILE LINK" rel="group"><img src="IMAGE LINK"><span class="journal-meta">Example Name<span>username</span></span><span class="icon">Image</span></a>

上面的图片设置了下面的背景色。

media="all"
.classic-view .instagram-photo.image {
    background-color: #3dc0f1;
}

我正在尝试将蓝色 (#3dc0f1) 颜色更改为此

background-color:rgba(255,215,0,0.6) !important;

没有运气，因为我只想将颜色更改为这个 id

id="p1130472628000663001_176824616"

因为如果我转到自定义 css 并放置此 css 代码

.instagram-photo 
{
   background-color:rgba(255,215,0,0.6) !important;
}

它更改了所有图像，但我想更改带有我上面给你的 ID 的图像。

我试过了

#p1130472628000663001_176824616.instagram-photo {
       background-color:rgba(255,215,0,0.6) !important;
    }

但是没有用。知道如何让它工作吗？谢谢!

附言下面的答案也是正确的，但我也设法做到了

a[id*="_176824616"][class*="image"]
{
background-color:rgba(255,215,0,0.6) !important;
}

非常感谢!

Answer 1

为什么不只是做:

.instagram-photo#p1130472628000663001_176824616
{
   background-color:rgba(255,215,0,0.6) !important;
}

这样，您就向 CSS 声明了一条规则，表示您希望将背景颜色设置为 instagram-photo 类的元素，并且 id 具有您的 id - 请注意类和id 连接到规则上的一个短语。这样做是为了在特定元素上指定包含类和 ID 的规则，而不是嵌套元素。

此外，为了简单起见，您可以简单地执行以下操作:

#p1130472628000663001_176824616
{
   background-color:rgba(255,215,0,0.6) !important;
}

通过“告诉”CSS，您希望仅将规则应用于具有特定 ID 的元素，而不考虑其类 - 这是您的具体情况，因此它应该可以正常工作。

此外，请考虑避免使用 !important，因为这可能会导致您的规则出现意外行为并违反规则应用的顺序。