Question

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

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

因为我的css无法做到a > img，我发现css3可以根据文件类型定位特定的链接。所以我尝试：

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

但没有任何改变，它比以前更值钱！那么将特定样式应用于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上设置背景属性。

Answer 1

我不确定我是否理解这个问题，但是如果你想要专门为链接中的图像设置一些css规则，你可以将它放入一个类并调用如下：

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

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

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

希望它有所帮助。

Answer 2

你需要改变你的CSS，这段代码没有意义：

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

这就是说“定位一个HPDroite类，其中一个标记的子元素具有以.gif结尾的href”。

因此根本不是针对标签，也不是内部的图像。

我修改了你的代码，并为你做了一个编程工具来查看我的更改。

见这里：Codepen with fixes

请注意，我更改了您的CSS，向您展示如何定位标记以及如何定位内部图像，以及一些增加的幻想;）！

希望这对项目有所帮助和好运。

由于问题更改而更新：

.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标签上，因为图像没有文字，改变如下：

.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"] {
  border: 0;
  background: none;
}
.PartieDroite1 a > img[src$=".gif"]:hover {
  background: pink;
}

默认情况下，此图片会更新为没有边框或背景，但仍然允许标签没有文字装饰。

例如，我设置了图像的背景：悬停以使背景变为粉红色。

“那么将特定样式应用于img的方式是什么？”

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

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

如何在悬停时改变图像，这里：

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

因此我会解释你的问题。

Answer 3

那么将特定样式应用于img
的方法是什么

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

此选择器方法

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

＆＃13;

img {
  border: 12px solid green
}
img[src$=".png"] {
  border-color: yellow;
}
img[src$=".jpg"] {
  border-color: red;
}

＆＃13;

<img src="http://hello-kitty.sanriotown.com/images/kitty.png" alt="" />

<img src="http://static.tvtropes.org/pmwiki/pub/images/Hello_Kitty_Pink_2981.jpg" alt="" />

＆＃13;

如果里面的图片是一个链接，那么样式将是：

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

注意：

但是，如果您尝试根据图片格式设置链接的样式，那么这不可能是there is no parent selector

目标图像链接和CSS

3 个答案: