目标图像链接和CSS

基本上，我正在寻找一种将特定样式应用于链接图像的方法，如：

<a href="http://XXXX"><img alt="" src="/media/XXXX.gif"></a>

但是没有什么改变，它比以前更值得！ 那么，如何将特定样式应用于

img

编辑：船长解释后，我的代码如下：

.PartieDroite1 p {
  padding: 0.3em;
}
.PartieDroite1 a {
  color: green;
  padding: em(2px);
  font-size: smaller;
}
.PartieDroite1 a:hover {
  color: black;
  background: green;
  text-decoration: none;
}
.PartieDroite1 a > img[src$=".gif"] {
  text-decoration: none;
}
.PartieDroite1 a > img[src$=".gif"]:hover {
  text-decoration: none;
  border: 0;
  background: none;
}

---

我的目标是设置

a img:hover

上的background属性。我不确定我是否理解这个问题，但是如果您希望专门为链接内的图像设置一些css规则，您可以将该属性放入一个类中，并像这样调用：

然后，要向其中添加css规则，可以调用

.mylink img
{
  /*Your css rules here*/
}

---

希望有帮助。

您需要更改CSS，此代码没有意义：

.HPDroite a[href$=".gif"] {
  text-decoration: none;
}

这是说“目标是一个HPDroite类，该类具有以.gif结尾的href的标记的子元素”

因此，根本不针对a标签，也不针对内部图像

我修改了您的代码，并为您制作了一个代码笔以查看我的更改

请看这里：

注意，我修改了你的CSS，向你展示了如何定位a标签和如何定位里面的图像，以及一些额外的幻想；）

希望这对项目有帮助，祝你好运

由于有问题的更改而更新：

.PartieDroite1 p {
  padding: 0.3em;
}
.PartieDroite1 a {
  color: green;
  padding: em(2px);
  font-size: smaller;
}
.PartieDroite1 a:hover {
  color: black;
  background: green;
  text-decoration: none;
}
.PartieDroite1 a > img[src$=".gif"] {
  text-decoration: none;
}
.PartieDroite1 a > img[src$=".gif"]:hover {
  text-decoration: none;
  border: 0;
  background: none;
}

首先，您要在图像上设置文本装饰，这应该只在a标记上，因为图像没有文本，更改如下：

这会在默认情况下更新图像，使其没有边框或背景，并且仍然允许a标记没有文本装饰

例如，我设置了图像的背景：hover使背景变成粉红色

“那么，如何将特定样式应用于img？”

好的，上面我已经演示了如何更改.PartieDroite1>a>img中所有图像的样式-这里：

.PartieDroite1 a > img[src$=".gif"] {
      border: 0;
      background: none;
    }

以及如何在悬停时更改图像，如下所示：

.PartieDroite1 a > img[src$=".gif"]:hover {
      background: pink;
    }

这样回答了你的问题，正如我将要解释的那样

那么，如何将特定风格应用于img

要设置特定图像格式的样式，请使用：

此选择器方法

img[src$=".png"] {
  border-color:yellow;
}

img{
边框：12px纯绿色
}
img[src$=”.png“]{
边框颜色：黄色；
}
img[src$=”.jpg“]{
边框颜色：红色；
}

很难理解您的问题，但如果我理解正确，它与CSS3或SASS完全无关。这是一个简单的CSS问题：如何为嵌套在

a

标记中的img标记创建样式？对吗？它是css，但应用了sass和css3语法，因为实际上我的a/hover应用于文本和img…我不知道“我不希望它出现在img上，所以我看到css不能做到这一点，但css3是的，它以图像文件扩展名为目标。你似乎不了解属性选择器是如何工作的。除非锚元素的href以

.gif

结尾，否则您的选择器没有任何作用。好的，

img[href$=“.gif”]：hover

可能更好？除非您有Sass->CSS编译问题，不要发布Sass代码。非常感谢您的解释，因为css3在本例中起作用。我的代码是针对SCS的…忘记了精确性。我编辑我的帖子是为了显示我的实际代码和目标。为什么您要记下我的答案？我当时的回答是正确的。我没有这样做。我更新了我的答案来回答你的问题，如果你有什么特别需要补充的，请在这里留下评论，不要给我打分。但是，如果答案有帮助，请给我投赞成票：）。干杯，Skulldevt这不会删除由anchor元素创建的下划线。谢谢logan，但您的方式需要将类应用于my a元素，它是一个动态链接。不确定“动态链接”是什么意思，但即使href更改，css仍将应用。如果链接中的图像恰好是.gif图像，您是否正在尝试修改该图像的效果？

.PartieDroite1 a > img[src$=".gif"]:hover {
      background: pink;
    }

img[src$=".png"] {
  border-color:yellow;
}