css - 着色表单元格后代

Question

我正在我自己的个人浏览器上执行此操作，查看公共(public)网站。因此，我无法更改他们的 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 Pane 中的解决方案。 http://jsfiddle.net/hZr9b/

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

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

Answer 1

如果无法更改标记，则不可能仅使用 CSS，因为图像和 anchor 不是 sibling ，并且存在 no parent selector在 CSS2/3 中帮助在这两个元素之间导航。

如果他们是 sibling ，可能会像这样简单:

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。