Question

我有一个由应用程序生成的Web代码（内置在angular中）。这是一个菜单选项，我需要隐藏其中一些。看起来例如像这样：

<div class=first>
  <div class=second>
   <a href=href1>
  </div>
  <div class=second>
   <a href=href2>
  </div>
  <div class=second>
   <a href=href3>
  </div>
</div>

现在，我需要隐藏包含带href2元素的div。我可以隐藏一个元素：

.first .second a[href="href2"] {display:none}

但是我需要隐藏整个div元素。我以为：

.first .second < a[href="href2"] {display:none}

那行不通。

我知道具有的JQUERY解决方案具有功能。问题是我只能调整应用程序的css文件。如果我是对的，我不能在css文件中使用jquery。

请...任何想法如何做到这一点？

非常感谢您的帮助

最好的问候马雷克

Answer 1

目前，（非常）无法使用CSS处理父元素。我不知道您的布局或CSS代码，但也许您可以以其他方式构造HTML代码。

修改
现在我明白了你的问题... 要隐藏（例如）第3个.second div，您不需要从子元素到父元素来进行处理。您可能正在寻找的是nth选择器，例如：nth-child()或nth-of-type()。
您可以找到更多信息here。

此外，您可能应该看看HTML和CSS的基础知识。在您的代码中，您尚未关闭<a>标记或未将属性的值括在引号中。

错误：

<div class=first></div>

右：

<div class="first"></div>

要隐藏（例如）第一个元素，可以使用:first-child选择器或:nth-child()选择器。由于您可能会使用nth-child()选择器，因此它将是：

.first > .second:nth-child(1) {
    display: none;
}

CSS-设置父元素不显示

1 个答案: