Question

我试图匹配每个孩子，但不是第一个dd和第一个dd元素：

<dl class="aaa">
   <dd>...</dd>
   <dt>...</dt>
</dl>

的CSS：

.aaa dd:not(:first-child),
.aaa dt:not(:first-child) {
   margin-top: 10px;
}

使用上面的CSS，只有dd匹配，第一个dt将应用margin-top属性。

我想我在这里使用first-child错了？

Answer 1

您应该使用:first-of-type伪类而不是:first-child。

:first-child指的是任何元素，它是其父元素的第一个子元素，而:first-of-type代表其类型中的第一个元素其父母的孩子。

Answer 2

＆＃13;

{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

.aaa dd:not(:first-of-type),
.aaa dd + dt:not(:first-of-type) {
   background: #ddd;
}

＆＃13;

<dl class="aaa">
   <dd>DD</dd>
   <dt>DT</dt>
    
    <dd>DD</dd>
   <dt>DT</dt>
    
    <dd>DD</dd>
   <dt>DT</dt>
</dl>

＆＃13;

Answer 3

我建议使用常规兄弟（~）组合子来定位<dt>和{{1的后续兄弟姐妹的所有<dd>和<dt>元素}}：

<dd>

.aaa dt ~ dt,
.aaa dd ~ dd {
  color: #f90;
}

// Just for numbering the <dt> and <dd> elements.
$('dt').text(function(i) {
  return 'Term ' + i;
});

$('dd').text(function(i) {
  return 'Definition ' + i;
});

.aaa dt ~ dt,
.aaa dd ~ dd {
  color: #f90;
}

这是因为在您发布的代码中：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<dl class="aaa">
  <dt></dt>
  <dd></dd>
  <dt></dt>
  <dd></dd>
  <dt></dt>
  <dd></dd>
  <dt></dt>
  <dd></dd>
  <dt></dt>
  <dd></dd>
</dl>

.aaa dd:not(:first-child), .aaa dt:not(:first-child) { margin-top: 10px; }的选择器无法与任何元素匹配，因为<dt>不是其父级的<dt>。

匹配第一个dt和第一个dd，不工作

3 个答案: