Question

美好的一天，

我正在编辑一个链接，其中包含我正在使用的插件生成的图像，这是它生成的结构。

<a href="#"><img src="../../image.jpg">Text Here</a>

我的问题是如何选择＆＃34; Text Here＆＃34;所以我可以在不影响图像的情况下添加属性吗？

有没有办法在不改变结构的情况下实现这一目标？

感谢您的时间：）

Answer 1

因此，您无法仅在a标记内定位文本，而无需使用其他标识符。但您可以定位img代码。所以我建议只设置文本和图像的属性，并使用img标记覆盖它们。所以你可以这样做：

a{
   font-size: 14px;
   color: red;
 }

a img{
  float: left;
  margin: 0 5px 0 0;
}

等等。

Answer 2

您可以为img和a

添加样式

a {
  display: inline-block;
  text-align: center;
  text-decoration: none;
  color: red;
}
a img {
  display: block;
  margin-bottom: 10px;
}

<a href="#"><img src="http://placeimg.com/100/100/any">Text Here</a>

或类似的东西

a {
  display: inline-block;
  text-align: center;
  text-decoration: none;
  color: red;
}
a img {
  margin-right: 10px;
  vertical-align: middle;
}

<a href="#"><img src="http://placeimg.com/100/100/any">Text Here</a>

Answer 3

用span标签包裹它：

<a href="#">
   <img src="../../image.jpg">
   <span>Text Here</span>
</a>

然后，像这样设计：

a > span {
    // Give your text a style
}

Answer 4

您可以更改结构，即使您无法更改生成它的插件：

＆＃13;

var a = document.getElementsByTagName('a')[0];
var textNode = a.childNodes[1];
a.removeChild(textNode);
var span = document.createElement('span');
span.textContent = textNode.nodeValue;
a.appendChild(span);

＆＃13;

a span {
  background-color: red;
}

＆＃13;

<a href="#"><img src="http://upload.wikimedia.org/wikipedia/commons/thumb/c/ce/Wikipedia-logo-ms.png/36px-Wikipedia-logo-ms.png">Text Here</a>

＆＃13;

如果您在插件之后运行此功能，这将使您能够将float这样的属性单独应用于文本。（显然，将选择器调整到您自己的结构，可能使用QSA并添加循环。）

如何仅在带图像的锚中选择文本

4 个答案: