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

我有以下的HTML，并且我想隐藏元素href指向#something_else如果它的第一个兄弟（或父元素的第一个子）具有类string 。隐藏元素，如果第一个兄弟具有特定的href

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

来源

2016-02-23 bard

指向'＃something_else'的'a'不是具有class = string的元素的第一个兄弟或子元素。我假设你想用CSS复制jQuery行为（即使描述看起来有点偏离）。 – Harry

我的意思是父元素的第一个孩子 - 它有类的描述 – bard

好吧，但*第一个兄弟*部分仍然有点混淆。希望下面给出的答案之一可以帮助你。 – Harry

是的，这是完全可能的，至少对于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>

来源

2016-02-23 05:02:46 Sarhanis

可以使用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>

看到在这里工作的例子。

谢谢

来源

2016-02-23 05:03:03

OP已经使用JQuery完成了。他们想要css解决方案。 – ketan

是的只是添加它 –

您可以使用下面的选择器。它将选择（和样式/隐藏）所有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?）。

来源

2016-02-23 05:03:45 Harry

性能考虑*仅适用于单独使用。 * * .string：first-child' *与* .string：first-child相同* - 是否包含纯粹的文体风格。 – BoltClock

@BoltClock：但是'span.string'和'* .string'在性能方面是一样的吗？ – Harry

假设所有'.string'元素都是跨度？我不知道。说实话，我还没有看到它实际上重要的情况。 – BoltClock

这就是：

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

来源

2016-02-23 05:04:29 AlexM

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

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

来源

2016-02-23 05:07:02 vivek

当然，像这样：

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

来源

2016-02-23 05:11:32

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

回答

相关问题