如何正确<ins>标记<dl><dt><dd>？

Question

我使用<ins>和<del>标记文档中的编辑更改。为了使它们更好地可读，除了<u>和<s>外，它们还被涂上了一些绿色和红色。除了dl-dd-dt列表之外，一切都很好。在那里，我使用<ins>周围，但绿色既不保留<dt>也不保留<dd>。

我知道我可以为每个<dt>和<dd>添加另一个<ins>。但是，如果可能的话，我更喜欢一种更有原则的方法:毕竟，应该添加整个文本，包括其缩进，而不仅仅是元素，因此使用单个封闭的<ins>在语义上更准确。

(我使用的是Firefox 39.0，应该有这个问题)

ins {
  background: #e4ffe4
}
del {
  background: #ffd0d0
}

<INS>
          Preamble, green
    <DL>
    <DT>dt: underlined but not green
    <DD>dd: underlined but not green
    
    <DT><INS>dt-with-ins, green</INS>
<DD>
  <INS>dd-with-ins, green</INS>
  </DL>
  </INS>
  <HR>
  <A href="http://validator.w3.org/check?uri=referer">Validated HTML</A>

Answer 1

给你。只需添加一个ins dl样式。

ins, ins dl {
  background: #e4ffe4
}
del {
  background: #ffd0d0
}

<INS>
          Preamble, green
    <DL>
    <DT>dt: underlined but not green
    <DD>dd: underlined but not green
    
    <DT><INS>dt-with-ins, green</INS>
<DD>
  <INS>dd-with-ins, green</INS>
  </DL>
  </INS>
  <HR>
  <A href="http://validator.w3.org/check?uri=referer">Validated HTML</A>

Answer 2

ins元素默认是内联的。试着将它们设置为block或inline-block

ins {
  background: #e4ffe4;
  text-decoration: underline;
  display: inline-block;
}
del {
  background: #ffd0d0;
}

<ins>
  Preamble, green
  <dl>
    <dt>dt: underlined and green</dt>
    <dd>dd: underlined and green</dd>
    <dt><ins>dt-with-ins, green</ins></dt>
    <dd><ins>dd-with-ins, green</ins></dd>
  </dl>
</ins>
<hr />
<a href="http://validator.w3.org/check?uri=referer">Validated HTML</a>

Answer 3

@false，我同意Lance关于使用span元素并将它们嵌入ins元素的观点。我认为这段代码应该创建您想要的外观。

ins, ins span { 
    background: #e4ffe4;
} 
del { 
    background: #ffd0d0;
}

<ins>Preamble, green
<dl>
    <dt>dt: underlined but not green</dt>
    <dd>dd: underlined but not green</dd>
    <dt><span>dt-with-ins, green</span></dt>
    <dd><span>dd-with-ins, green</span></dd>
</dl>
</ins>

让我知道这是不是你想要的样子。

Answer 4

您可以使用(不推荐的…)catch-all选择器(*)作为后代的catch-all:

ins, ins * { /* <- Catch all! */
  background: #e4ffe4
}
del, del * { /* <- Catch all! */
  background: #ffd0d0
}

<INS>
          Preamble, green
    <DL>
    <DT>dt: underlined but not green
    <DD>dd: underlined but not green
    
    <DT><INS>dt-with-ins, green</INS>
<DD>
  <INS>dd-with-ins, green</INS>
  </DL>
  </INS>
  <HR>
  <A href="http://validator.w3.org/check?uri=referer">Validated HTML</A>