Question

我有以下HTML，如果第一个兄弟（或父元素的第一个子节点）具有类{{{I}}，我希望隐藏href指向#something_else的元素1}}。

string

我知道这可以使用JS / jQuery，例如

<div class="description">
  <span class="string">blah</span>
  <a class="link" href="#something">blah blah</a>
  <a class="link" href="#something_else">blah blah blah></a>
</div>

但只有CSS？

Answer 1

是的，这完全可能，至少对于IE7或更高版本的浏览器而言。

以下是：

＆＃13;

.description *.string:first-child ~ a[href='#something_else'] {
  display: none;
}

＆＃13;

<div class="description">
  <span class="string">blah</span>
  <a class="link" href="#something">blah blah</a>
  <a class="link" href="#something_else">blah blah blah></a>
</div>

＆＃13;

Answer 2

您可以使用以下选择器。它将选择（和样式/隐藏）a为href的所有#something_else（锚）标记，并且是span的兄弟，它是其中的第一个孩子parent，其类为string。

（我已将所需元素的color设置为red，而不是将其隐藏用于演示目的。）

＆＃13;

.description span.string:first-child ~ a[href="#something_else"] {
  color: red;
}

＆＃13;

<div class="description">
  <span class="string">blah</span>
  <a class="link" href="#something">blah blah</a>
  <a class="link" href="#something_else">blah blah blah></a> <!-- this will be selected -->
</div>

<div class="description">
  <span class="notstring">blah</span>
  <span class="string">blah</span>
  <a class="link" href="#something">blah blah</a>
  <a class="link" href="#something_else">blah blah blah></a> <!-- this will not be selected -->
</div>

＆＃13;

注意：如果class="string的元素（第一个孩子）并非总是span，那么Sarhanis＆＃39;答案是最好的，但如果它总是span，我建议不要使用*（更多的是个人偏好，但主要是因为(why) is the CSS star selector considered harmful?）。

Answer 3

可以使用javascript或jquery。

＆＃13;

$(document).ready(function(){
	if ($('.description').children().first().hasClass('string')) {
		$('a[href="#something_else"]').hide();
	}
});

＆＃13;

<div class="description">
  <span class="string">blah</span>
  <a class="link" href="#something">blah blah</a>
  <a class="link" href="#something_else">blah blah blah></a>
</div>

＆＃13;

请参阅此处的工作示例。

由于

Answer 4

这是：

.description span.string ~ .link[href="#something_else"] { display: none; }

<div class="description">
  <span class="string">blah</span>
  <a class="link" href="#something">link 1</a>
  <a class="link" href="#something_else">link 2</a>
</div>

Answer 5

   .string+a[href="#something"] {
   color:red;
   }

您可以使用上面的代码继承小提琴https://jsfiddle.net/gmp4d5ya/

Answer 6

当然，像这样：

.description { margin:1em; }

.link[href="#something_else"] { display:none; }
.string + .link + .link[href="#something_else"] { display:block; }

<div class="description">
  <span class="string">string</span>
  <a class="link" href="#something">something</a>
  <a class="link" href="#something_else">something_else</a>
</div>

<div class="description">
  <a class="link" href="#something">something</a>
  <a class="link" href="#something_else">something_else</a>
</div>

<div class="description">
  <span >not a string</span>
  <a class="link" href="#something">something</a>
  <a class="link" href="#something_else">something_else</a>
</div>

如果第一个兄弟具有特定的href，则隐藏元素

6 个答案: