隱藏元素，如果第一個兄弟具有特定的href

Question

我有以下的HTML，並且我想隱藏元素href指向#something_else如果它的第一個兄弟（或父元素的第一個子）具有類string 。

<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> 

我知道這是可能的使用JS/jQuery，例如，

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

但它可能只有CSS？

Answer 1

是的，這是完全可能的，至少對於IE7或更高版本的瀏覽器。

下面的方式：它

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

<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>

Answer 2

可以使用JavaScript或jQuery的。

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

<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>

看到在這裏工作的例子。

謝謝

Answer 3

您可以使用下面的選擇器。它將選擇（和樣式/隱藏）所有a（主播）標籤，其href爲#something_else，並且是span的兄弟，它是其父代的第一個孩子，並且其類別爲string。

（我已經設置了所需元素的color到red，而不是隱藏它演示的目的）

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

<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>

注：如果元素（第一個孩子）與class="string並不總是span然後Sarhanis的答案是最好的，但如果它總是span，我會r建議不要使用*（更多的個人偏好，但主要是因爲(why) is the CSS star selector considered harmful?）。

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>