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

一尘不染

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

html

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使线条具有不同的颜色吗？

阅读 741

2020-05-10

共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>如果打算真正删除的含义，则使用；否则，<s>在text-decorationCSS中使用元素或样式，如这里的第一个示例。）

为了使删除线出现在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的浏览器则不需要。）

2020-05-10