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

  • Z时代
  • 2024-01-10
  • 分类：问答

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

回答：

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

<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的浏览器则不需要。）

以上是 CSS删除线与文本的颜色不同？ 的全部内容， 来源链接： utcz.com/qa/426721.html

回到顶部