如何使用css定位特定的img(How to target specific img using css)

如何使用css定位特定的img(How to target specific img using css)

所有，

我知道有一些关于这个问题的帖子，但这些建议似乎没有用。 我在这做错了什么？

这是片段。 我的css中未注释掉的第一部分将在悬停时将不透明度应用于我的两个图像。

当删除第一个块并在第二个块中注释时，它假设仅定位delta.jpg图像并应用不透明度，使shh.png图像不受影响。

.wsite-image-border-none img:hover {
  opacity: 0.5;
}

/*
.wsite-image-border-none img[src="image\delta.jpg"]:hover {
  opacity: 0.5;
}
*/ 
  
<div class="wsite-image wsite-image-border-none " style="padding-top:10px;padding-bottom:10px;margin-left:0;margin-right:0">
	<a><img src="image\shh.png" alt="Picture" style="width:293;max-width:100%"></a>
	<a><img src="image\delta.jpg" alt="Picture" style="width:293; max-width:100%"></a>
	<div style="display:block;font-size:90%"></div>
</div> 
  
 
 
 我试图在我的网站上做这个，我没有100％控制HTML。 需要在CSS中执行此操作。 
 
 谢谢 
All,
 
I know there have been some posts about this issue but the suggestions dont seem to work. What am I doing wrong here? 
 
This is the snippet. The first part in my css that is not commented out will apply the opacity to my two images on hover.
 
When removing the first block and commenting in the second block, its suppose to target only the delta.jpg image and apply the opacity, leaving the shh.png image to be unaffected.
 
 
 
  
  
.wsite-image-border-none img:hover {
  opacity: 0.5;
}

/*
.wsite-image-border-none img[src="image\delta.jpg"]:hover {
  opacity: 0.5;
}
*/ 
  
<div class="wsite-image wsite-image-border-none " style="padding-top:10px;padding-bottom:10px;margin-left:0;margin-right:0">
	<a><img src="image\shh.png" alt="Picture" style="width:293;max-width:100%"></a>
	<a><img src="image\delta.jpg" alt="Picture" style="width:293; max-width:100%"></a>
	<div style="display:block;font-size:90%"></div>
</div> 
  
 
 
I am trying to do this on my weebly site where I don't have 100% control over the HTML. Need to do this in CSS.
 
Thanks
                
最满意答案
                
                    
                        
 \字符有特殊意义; 它用于转义字符 。 
 
 如果要匹配单个\字符，则需要使用其中两个\\ ： 
 
.wsite-image-border-none img[src="image\\delta.jpg"]:hover {
  opacity: 0.5;
}
 
 
 
  
  
img[src="image\\delta.jpg"]:hover {
  opacity: 0.5;
} 
  
<img src="image\delta.jpg" /> 
  
 
 
 
 但是，正如评论中所指出的，由于路径通常使用正斜杠，您实际上可能需要： 
 
.wsite-image-border-non img[src="image/delta.jpg"]:hover {
  opacity: 0.5;
}
 
 
 
  
  
img[src="image/delta.jpg"]:hover {
  opacity: 0.5;
} 
  
<img src="image/delta.jpg" /> 
  
 
The \ character has special meaning; it is used to escape characters.
 
If you want to match a single \ character, you will need to use two of them \\:
 
.wsite-image-border-none img[src="image\\delta.jpg"]:hover {
  opacity: 0.5;
}
 
 
 
  
  
img[src="image\\delta.jpg"]:hover {
  opacity: 0.5;
} 
  
<img src="image\delta.jpg" /> 
  
 
 
 
However, as pointed out in the comments, since paths typically use forward slashes, you may actually want:
 
.wsite-image-border-non img[src="image/delta.jpg"]:hover {
  opacity: 0.5;
}
 
 
 
  
  
img[src="image/delta.jpg"]:hover {
  opacity: 0.5;
} 
  
<img src="image/delta.jpg" />