javascript - 您可以使用 CSS 来引用某个对象的父项或子项吗？

Question

我想我被 JavaScript 宠坏了。如果您想更改有关父级的某些内容，您可以编写类似 parentNode.style.etc 的代码。

 
<TABLE id="hasID">
  <TBODY>
    <TR>
      <TD>
        <IMG id="hasID2" src="somePicture.png">
        <IMG id="hasID3" src="someOtherPicture.png">
      </TD>
    </tr>
    <tr>
      <td>other stuff</td>
    </tr>
  </tbody>
</table>

从我的码表可以看出有id，img标签有id。我想做的是向第一个 TD 添加一个 stype 类，以便所有图像都向左或中间对齐，诸如此类。

然而，这是一个棘手的部分，我不想使用 JavaScript，因为它看起来很慢。一切都从右边开始，然后在一切加载完成后跳到中心。

此外，这是第二个棘手的部分。我无法更改向 TD 添加类，因为它是由 JSF 生成的。

所以我的主要问题是我可以用 CSS 做到这一点。

更新:

我真的不需要引用 parent 。引用 child 对我也有用。

Answer 1

您不能通过 CSS 选择父对象。它被提议作为一项功能，但它甚至还没有接近实现。

我建议您将所有必须的 javascript 移动到上述内容之后，这意味着它会在该部分呈现后立即运行，从而消除任何延迟。

<TABLE id="hasID">
  <TBODY>
    <TR>
      <TD>
        <IMG id="hasID2" src="somePicture.png">
        <IMG id="hasID3" src="someOtherPicture.png">
      </TD>
    </tr>
    <tr>
      <td>other stuff</td>
    </tr>
  </tbody>
</table>

<script type="text/javascript">
    var img = document.getElementById("hasID2");
    img.parentNode.style.textAlign = "right";
</script>

在这些场景中可以使用内联 Javascript。