Question

首先，我无法控制html。我正在寻找一个CSS解决方案。 CSS2 / 3很好。我不知道为什么我不能解决这个问题，但是嘿，这是星期五。我想我的大脑很乱。

http://jsfiddle.net/mrtsherman/PDBmU/13/

我需要隐藏包含（Documentation x.x.x）的span.smalltext。在小提琴中，我用红色框突出显示了这一点。

<div class="result">                       
  <span class="icon icon-page" title="Page">Page:</span>
  <a href="/display/">Create</a>
  <!-- Hide this span -->
  <span class="smalltext" style="border: 1px solid red;">
    (<a href="/display/doc">Documentation x.x.x</a>)
  </span>    
  <br>
    ... <span class="search-highlight"><strong>search</strong></span> project ...         
  <br>
  <span class="smalltext">    
    Jun 17, 2011 14:57
  </span>
</div>
<!-- ## The above structure is repeated many times. I would like to hide all of them.  -->

到目前为止，我尝试了类似的东西 - 但它无法正常工作

div.result span.smalltext:first-child {display: none;}

Answer 1

...莫非

.result a + .smalltext {
    display:none;
}

......做到了吗？我也做了jsFiddle demo

Answer 2

.result span:nth-of-type(2) {display:none}

works too ......虽然很乱：P

Answer 3

我只需要正确的选择器像div.result span.smalltext:first-child {display: none;}
这样的东西

请参阅此答案，了解您的尝试无效的原因：Why doesn't this CSS :first-child selector work?

改为使用.result > span:first-child + a + .smalltext。

此选择器适用于所有浏览器（IE6除外）。

Answer 4

我会说两种不同的方法，CSS或jQuery CSS：

.result span:nth-of-type(2) {font-weight:bold;}

JS：

$('.result').each(function(){
    $(this).find('.smalltext:first').css('background-color', 'red');
});

只要HTML真的没有改变就行了。小提琴也是http://jsfiddle.net/PDBmU/19/

/编辑显然，此示例中给出的css属性仅用于演示目的，您需要display：none;或显示：隐藏;取决于想要的输出

Answer 5

我不确定，这是多么稳定，因为你的输出可能包含很多a + span s，但这应该适用于你的例子

.result > a + span {
  display: none;
}

CSS选择器隐藏一组的第一个

5 个答案: