Question

我遇到了一个非常具体的问题：我使用的门户网站不允许我使用静态html，但仅限于CSS。

我需要隐藏一个未使用id声明的元素，因此我无法使用

#nameOfTheElement {display:none;}。

以下是元素在html中的外观：

<div class="notToBeHidden">
<label class="label aClassToBeHidden" for="aClassToBeHidden">
<div class="forminput aClassToBeHidden">
</div>

有人可以帮我理解如何从CSS中隐藏它，或者甚至可能吗？

不幸的是，我无法隐藏使用特定类的每个元素，因为即使在同一页面中也需要其他元素，我宁愿隐藏“标签类”和“div类”。

谢谢大家！

Answer 1

如果它总是在页面上的相同位置，您可以使用label.aClassToBeHidden:nth-child(7)作为标签（如果它是第七个这样的标签），并使用div.aClassToBeHidden:nth-child(7)作为div，给出：

label.aClassToBeHidden:nth-child(7),
div.aClassToBeHidden:nth-child(7) {
    display: none;
}

Answer 2

您的HTML看起来无效。但是，如果您在另一个LABEL元素中假设DIV和DIV元素，则可以使用子选择器隐藏它们：

.notToBeHidden > LABEL,
.notToBeHidden > DIV {display: none; }

Answer 3

如果容器notToBeHidden具有相同的子模式，您可以使用类似的东西来定位它们：

.notToBeHidden label { outline:1px dotted }
.notToBeHidden label+div { outline:1px dotted }

如果.notToBeHidden有许多标签元素或div，那么使用nth-child()选择器将是您的解决方案。同样，取决于预期的模式/输出。

如果这些元素没有一致的位置/输出，或者不能使用它们的父作为依赖项，那么就不可能编写可靠的CSS来隐藏这些元素。

Answer 4

我找到了一个对我有用的解决方案：

我的html页面中有两个类似的元素，我需要隐藏只能从CSS中工作。

<div class="notToBeHidden">
  <label class="label aClassToBeHidden" for="aClassToBeHidden">
  <div class="forminput aClassToBeHidden">
</div>
<div class="notToBeHidden">
  <label class="label anotherClassToBeHidden" for="anotherClassToBeHidden">
  <div class="forminput anotherClassToBeHidden">
</div>

我通过写CSS来隐藏元素：

.label.aClassToBeHidden{display: none}
.forminput.aClassToBeHidden{display: none}
.label.anotherClassToBeHidden{display: none}
.forminput.anotherClassToBeHidden{display: none}

因为我通过选择它们来隐藏在id元素之前：

#elementToBeHidden{display: none}

我不知道如何在类中使用相同的概念。

再次感谢大家！

如何隐藏CSS中没有id的元素？

4 个答案: