Question

请找到以下JSfiddle链接。我试图隐藏div中的第一个DIV子（具有aaaaaa值），其属性为aria-labelledby值。

但我认为我在CSS语法中犯了一些错误。

请建议。

div[aria-labelledby="ui-dialog-title-timeout-dialog"]:first-child {
    display:none;
}

HTML代码： -

<p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p>
<p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p>

<div aria-labelledby="ui-dialog-title-timeout-dialog">
  hello
      <div>aaaaaa</div>
    <div>X2</div>
    <div>X3</div>
</div

Answer 1

http://jsfiddle.net/5g7ot5qf/2/

必须是：

div[aria-labelledby="ui-dialog-title-timeout-dialog"] div:first-child {
    display:none;
}

查看：https://developer.mozilla.org/en/docs/Web/CSS/:first-child

Answer 2

使用div[aria-labelledby="ui-dialog-title-timeout-dialog"]>div:first-child作为选择器

添加＆gt; div

Answer 3

如果您希望使用aaaaa内容的div使用

div[aria-labelledby="ui-dialog-title-timeout-dialog"] > div:first-child {
    display:none;
}

如果你想要所有的div消失，但你好吗

div[aria-labelledby="ui-dialog-title-timeout-dialog"] > div {
    display:none;
}

如果您想定位div，请使用

div[aria-labelledby="ui-dialog-title-timeout-dialog"] > div:nth-child(n) {
    display:none;
}

n是您要隐藏的div（n=1,2,3,...）

编辑：小提琴：http://jsfiddle.net/wh3d3dtj/

Answer 4

最好使用http://caniuse.com/#search=first-of-type

div[aria-labelledby="ui-dialog-title-timeout-dialog"] > div:first-of-type

因为如果你把文字＆＃34;你好＆＃34;在一些标签

<h1>hello</h1>

然后：第一个孩子将无法工作

http://jsfiddle.net/kxhk83um/

DIV上的第一个孩子选择无效

4 个答案: