CSS删除线与文本不同的颜色？

小编典典

CSS删除线与文本不同的颜色？

all

HTML 元素del,strike或s都可用于文本删除线效果。例子：

<del>del</del>

....给出：德尔

<strike>strike</strike> and <s>strike</s>

....给：罢工和罢工

可以类似地使用text-decoration带有值的 CSS属性。line-through编码…

<span style='text-decoration:line-through'>
    text-decoration:line-through
</span>

…也将呈现为： ~~text-decoration:line-through~~

但是，删除线通常与文本颜色相同。

可以使用 CSS 使线条变为不同的颜色吗？

阅读 90

2022-04-19

共1个答案

小编典典

是的，通过添加一个额外的包装元素。将所需的线条颜色分配给外部元素，然后将所需的文本颜色分配给内部元素。例如：

<span style='color:red;text-decoration:line-through'>

  <span style='color:black'>black with red strikethrough</span>

</span>

…或者…

<strike style='color:red'>

  <span style='color:black'>black with red strikethrough<span>

</strike>

（但是请注意，这在 HTML4 中<strike>被认为已弃用，在 HTML5
中已过时（另请参见
 W3.org）。推荐的方法是在想要<del>删除的真正含义时使用，或者在其他情况下使用带有CSS的<s>元素或样式，如text- decoration这里的第一个例子。）

要为 a:hover 显示删除线，<HEAD>必须使用显式样式表（在中声明或引用）。（:hover伪类不能与内联 STYLE
属性一起应用。）例如：

<head>

  <style>

    a.redStrikeHover:hover {

      color:red;

      text-decoration:line-through;

    }

  </style>

</head>

<body>

  <a href='#' class='redStrikeHover'>

    <span style='color:black'>hover me</span>

  </a>

</body>

（IE7好像需要一些href设置在<a>前面:hover才有效果；FF和基于WebKit的浏览器不需要。）

2022-04-19