html - 样式化每一行,但 HTML 定义列表中的第一行

标签 html css css-selectors

设置每一行样式的最简单的选择器是什么(按行我的意思是每个 dd-dt 对,在我看来它们似乎出现在同一行上)定义列表,但第一个?我需要设置上边距。

<dl>
  <dt>...</dt>
  <dd>...</dd>

  <dt>...</dt>
  <dd>...</dd>

  <dt>...</dt>
  <dd>...</dd>

  (...)
</dl>

我的目标如下。有没有更简单的写法?

dl > dt:not(:first-of-type),
dl > dd:not(:first-of-type) {
    margin: 1mm 0 0 0;
}

最佳答案

来 self 的评论:

just use dt+dt or dt ~ dt if there's dd in between , first one will not apply the style

要在后面设置 dd 的样式,请重复选择器并将其用于 dd:dt ~dt ~dd

dt ~dt {
  color: red;
}
dt ~dt ~dd {
  color: tomato;
}
<dl>
  <dt> first</dt>
  <dd>in between</dd>
  <dt>not first</dt>
  <dd>in between</dd>
  <dt> not first</dt>
  <dd>in between</dd>
</dl>

关于html - 样式化每一行,但 HTML 定义列表中的第一行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37010569/

相关文章:

html - 在我的 H1 文本旁边放一张图片,不管文本的宽度是多少

html - 为具有属性且不是第一个子元素的第一个元素上色

javascript - 来自 "How FIleReader.readAsText in HTML5 File API works"的文件读取器错误

html - 媒体查询使 tel : link not work

jquery - 范围 slider 以字母开头

html - 位置固定且宽度 25% 未采用正确的宽度

javascript - CSS/AJAX - 在 AJAX 调用上激活样式

javascript - CSS input[value=whatever] 选择器似乎与 input.value 不匹配。我错过了什么?

javascript - JQUERY 在多个无序列表中选择第 n 个列表元素

jquery - 如何向这个动画 JQuery、CSS 和 HTML 条形图添加更多条形图