通过单击另一个元素来更改元素的css样式

我有这样的结构：

<div id="d1">
Text
<div id="d2">Word</div>
<a href="#hide">My other text</a>
</div>

正文
单词

现在，我想让它在点击

#hide:target

，

div#d2

后消失

---

我可以用CSS来实现这一点吗？

您可能应该使用javascript或jQuery来实现这一点

$('#object').click(function(){
   $('#tohide').hide();
});

使其具体化（本地范围）

---

但这不是正确的方法。使用类

您只需使用jQuery即可做到这一点：

$(document).ready(function(){
    $("a").click(function(){
        $("#d2").hide();
    });
});

---

可以使用CSS实现这一点，但需要使用javascript来更改元素的CSS（样式）

此解决方案不需要插件（如jQuery）

正文
单词

如果你想让它完全没有功能

<div id="d1">
    Text
    <div id="d2">Word</div>
    <a href="#hide" onclick="this.previousSibling.previousSibling.style.display='none';">My other text</a>
</div>

正文
单词

您可以使用CSS来实现这一点

如果稍微更改HTML标记，可以使用CSS

：target

d2：目标{ 显示：无； }

正文
单词

我坚信CSS代表风格，Javascript代表功能（HTML代表标记）

---

我犯了一个错误：在不应该使用CSS的地方使用CSS来定位和构建功能，相信我，你会因为这些坏习惯而给自己带来噩梦。在这种情况下，jQuery将成为您最好的朋友。它可以在所有浏览器（支持javascript）上运行，并且不会让您的功能在边缘情况下崩溃，也不会让您的用户生气。照Jack说的做，使用一些简单的jQuery。您还可以使用.addClass和.removeClass以其他方式更改css，而不仅仅是隐藏/显示。

css没有单击事件。它有

：hover

选择器，但没有单击。@gvee CSS

：active

不是一个单击选择器？@memorition我想它有点像，但是它更像是一个“点击并保持”选择器。一旦松开鼠标，选择器就不再有效。这是一个很好的解决方案。但仍然不完美。As document.getElementById是一个Jscript函数。我还是会用这个+1+1用于提供现成的解决方案。我没有看到任何其他的方法来做它只使用CSS。非常好。。非常感谢。醒醒要做到这一点，您不需要jQuery。您完全正确，您不需要jQuery。但正如你在这张表中所看到的：（查找：target）你所建议的方式在IE的任何版本上都不会很好地工作。即使是9和10（我认为很棒的浏览器）也被列为具有“不完整”的支持。我们不需要使用jQuery，因为我们不需要使用良好的实践来做任何事情。但是为了在许多用例中正常工作，请尝试使用良好的实践。现在已经过了上午11点，我非常清醒，谢谢。我的意思是，最好使用纯JavaScript，而不是jQuery。（如果这是你唯一需要JavaScript的时候）我不是说使用CSS.ah！好吧，我被你上面的评论吓坏了。完全正确。如果项目已经在使用jQuery，这可能是一个好主意，但如果没有，则不需要抽象。然而，如果有人正在学习如何将javascript添加到他们的站点，jQuery是非常友好的，值得使用。

<div id="d1">
    Text
    <div id="d2">Word</div>
    <a href="#hide" onclick="document.getElementById('d2').style.display='none';">My other text</a>
</div>

<div id="d1">
    Text
    <div id="d2">Word</div>
    <a href="#hide" onclick="this.previousSibling.previousSibling.style.display='none';">My other text</a>
</div>