Question

我正在使用<ins>和<del>标记文档中的编辑更改。为了使它们更易于阅读，除<u>和<s>外，它们还会以绿色和红色显示。除dl-dd-dt列表外，一切正常。在那里，我使用了<ins>，但<dt>和<dd>都没有保留绿色。

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

（我使用的是Firefox 39.0，这应该重要）

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 1

默认情况下，

ins个元素是内联的。尝试制作block或inline-block

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

你走了。只需添加ins dl样式。

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 3

您可以使用（非推荐的）catch-all选择器（*）作为后代的全能：

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 4

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

UItextField

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

如果这是您想要实现的外观，请告诉我。

如何正确<ins> -markup <dl> <dt> </dt> <dd>？

4 个答案: