Question

大家好，祝你们好。

我在一个网站上对css做出了奇怪的反应。

有这个代码

<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;
    }

但它没有用。知道我怎么能让它发挥作用？谢谢！

P.S。下面的答案也是正确的，但我也设法用

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连接到一个关于规则的短语。这样做是为了指定在特定元素上包含class和id的规则，而不是嵌套的规则。

另外，请注意，为简单起见，您可以这样做：

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

说＆＃34;说＆＃34;对于CSS，您希望仅将规则应用于具有特定ID的元素，而不考虑其类 - 这在您的情况下是特定的，因此它应该可以正常工作。

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

ID和类

1 个答案: