更改html类的名称

Question

我使用的网站显示了我没有用的信息，所以我试图隐藏其中的一些用于插入自定义CSS的Chrome插件。

我会尝试更好地解释。

<div class="splitscreenleft"> <div id="toplevel"

<div class="splitscreenleft"> <div id="coursesection"

我想隐藏其中一个。 splitscreenleft上面的所有内容都是相同的。所以唯一的区别是下面的div id。

我必须以某种方式根据我认为的div下面的div名称隐藏其中一个类。 解决这个问题的方法是什么？

Answer 1

您应该可以通过CSS或JavaScript执行此操作。

您甚至可能不需要搜索孩子。您可以选择页面上显示的第一个或第二个样式。要通过CSS执行，请使用第一个类型选择器 - http://www.w3.org/TR/css3-selectors/#first-of-type-pseudo

div.splitscreenleft:first-of-type { display: none; }

要通过JavaScript执行此操作，您可以找到父对象，然后将其隐藏： document.getElementById("toplevel").parentNode.style.display = 'none';

您应该能够在jQuery中类似地执行此操作：

$(".splitscreenleft:has(#toplevel)").hide();​

Answer 2

这可以通过CSS完成，仅使用structural pseudo-classes：

.parentClassName .className :nth-child(n) { display: none; }

n是您要选择的元素。在您的情况下，您有两个具有相同类的元素。要隐藏第一个，只需将n替换为1，或将2替换为隐藏第二个。你明白了。

Answer 3

如果你无法使用JS访问jQuery（还没有尝试使用chrome），你总是可以说

$('#topLevel').parent().hide();

Answer 4

下面的代码可以更改您在样式表中定义的类。

document.getElementById("testPara").className = "yourclass";