Question

我在自己的个人浏览器上进行此操作，查看pbulic网站。因此，我无法改变他们的HTML。我使用chrome和stylebot来应用CSS样式。我需要一个CSS解决方案：

<tr class="bg_small_yellow">
  <td class="row1" valign="middle" align="center" width="20">                                 
    <img class="icon_folder" src="/eaforum/images/transp.gif" alt="">
  </td>
  <td class="row1" width="100%">
    <span class="topictitle">
      <a href="/eaforum/posts/list/9578017.page" id="topic_link_9578017" title="SimCity Traffic">
        SimCity Traffic
      </a>
    </span>
  </td>

当且仅当color: gray;是班级<a>时，如何将<img>应用于.icon_folder链接？

这是一个jsFiddle页面。我只想在CSS窗格中找到解决方案。 http://jsfiddle.net/hZr9b/

我正在寻找类似的东西，但这确实有效：

(td > img.icon_folder) + td a:link { color: gray; }

Answer 1

如果无法更改标记，那么仅使用CSS是不可能的，因为图像和锚不是兄弟，而CSS2 / 3中有no parent selector来帮助在这两个元素之间导航。

如果他们是兄弟姐妹，那可能就像这样容易：

<强> HTML：

<img class="icon_folder" src="/eaforum/images/transp.gif" alt="">
<a href="/eaforum/posts/list/9578017.page" id="topic_link_9578017" title="SimCity Traffic">SimCity Traffic</a>

<强> CSS：

img[class="icon_folder"] + a {
    color:grey;
}

但正如您所提到的，您无法更改此实例中的标记，遗憾的是您必须使用JavaScript。

着色表细胞后代

1 个答案: