HTML元素del、strike或s都可以用于文本删除效果。例子:
<del>del</del>
....德尔给:
<strike>strike</strike> and <s>strike</s>
．...给予:罢工和罢工
值为line-through的CSS text-decoration属性也可以类似地使用。代码…
<span style='text-decoration:line-through'>
text-decoration:line-through
</span>
.．.也会渲染成这样:文本装饰:线贯穿
但是，划线通常与文本的颜色相同。
CSS可以用来使线的颜色不同吗?
当前回答
是的，通过添加额外的包装元素。为外部元素指定所需的贯穿线颜色，然后将所需的文本颜色分配给内部元素。例如:
< span风格= '颜色:红色;文字修饰:线穿过的> <span style='color:黑色'>黑色加红色擦除线</span> < / span >
…或… <罢工风格= '颜色:红色' > <span style='color:黑色'>黑色加红色擦除线<span> > < /罢工
(但是请注意，<strike>在HTML4中被认为已弃用，在HTML5中已过时(参见W3.org)。推荐的方法是使用<del>如果删除的真正含义是，或者使用<s>元素或样式与文本装饰CSS在这里的第一个例子。)
To make the strikethrough appear for a:hover, an explicit stylesheet (declared or referenced in <HEAD>) must be used. (The :hover pseudo-class can't be applied with inline STYLE attributes.) For example: <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 seems to require some href be set on the <a> before :hover has an effect; FF and WebKit-based browsers do not.)
其他回答
下面是一个jQuery实现的示例——感谢gojomo的回答和utype的建议(+1)
$(function(){
//===================================================================
// Special price strike-out text
// Usage:
// Normally: <span class='price'>$59</span>
// On special: <span class='price' special='$29'>$59</span>
//===================================================================
$(".price[special]").each(function() {
var originalPrice = $(this).text();
$(this).html('<strike><span>' + originalPrice +'</span></strike> ' + $(this).attr('special'))
.removeAttr('special')
.addClass('special');
});
});
CSS可以是
.price strike, .price.special { color: Red; }
.price strike span { color: Black; }
Blazemonger的回复(上面或下面)需要投票-但我没有足够的分数。
我想在一些20px宽的CSS圆形按钮上添加一个灰色条来表示“不可用”，并调整了Blazemonger的CSS:
.round_btn:after {
content:""; /* required property */
position: absolute;
top: 6px;
left: -1px;
border-top: 6px solid rgba(170,170,170,0.65);
height: 6px;
width: 19px;
}
是的，通过添加额外的包装元素。为外部元素指定所需的贯穿线颜色，然后将所需的文本颜色分配给内部元素。例如:
< span风格= '颜色:红色;文字修饰:线穿过的> <span style='color:黑色'>黑色加红色擦除线</span> < / span >
…或… <罢工风格= '颜色:红色' > <span style='color:黑色'>黑色加红色擦除线<span> > < /罢工
(但是请注意，<strike>在HTML4中被认为已弃用，在HTML5中已过时(参见W3.org)。推荐的方法是使用<del>如果删除的真正含义是，或者使用<s>元素或样式与文本装饰CSS在这里的第一个例子。)
To make the strikethrough appear for a:hover, an explicit stylesheet (declared or referenced in <HEAD>) must be used. (The :hover pseudo-class can't be applied with inline STYLE attributes.) For example: <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 seems to require some href be set on the <a> before :hover has an effect; FF and WebKit-based browsers do not.)
给你:
<style>身体 {颜色： #000;}</style> <del> <span style=“color：#999”>facebook</span> </del>
这个CSS3将使您更容易通过属性线，并工作良好。
span{
text-decoration: line-through;
text-decoration-color: red;
}
