css - CSS 文本装饰层次结构

Question

抱歉，如果这是重复的，但我已经足够是一个 CSS 新手，我什至不知道要搜索什么。

我正在尝试通过添加 a 来修改块内的文本装饰span，但它不起作用。怎么来的？我可以在 中添加新的文本装饰span，但不能减去旧的。

<h1 class="strikethrough">
    stricken<span class="no-strikethrough"> no strike</span>
</h1>

http://jsfiddle.net/zV3ga/2/

有没有办法可以实现我的目标？我想继承h1 除text-decoration 之外的所有属性，所以我真的更希望在该标签内包含我的“无罢工”文本。

Answer 1

我不知道为什么这些人说这是不可能的。这完全可以通过 CSS 实现。

http://jsfiddle.net/austinpray/y5bRS/

.strikethrough {
    text-decoration: line-through;
    color: blue;
}

.no-strikethrough {
    display:inline-block;
    text-decoration: none;
    color: red;
}
.no-strikethrough:before {
    content: '\00a0';
}

Answer 2

我认为您正试图用 atrile 保持第一部分，而没有罢工的第二部分。

所以这样做

<h1>
    <span class="strikethrough">stricken</span> no strike
</h1>

还有一件事情。如果您只是在 CSS 中使用连字符，那么在类名中使用连字符很好，但是当您转向 Javascript 时会导致问题（据我所知）。所以这样练习

Answer 3

您不能以当前的形式执行此操作，您正在对作为 span 的父级的 H1 进行罢工，您不能让孩子反转它。

Answer 4

删除线适用于整个父元素。它呈现了父级的全宽，没有办法为孩子“关闭”。

有什么理由不使用 HTML 标记？

<h1>Partial <strike>stricken</strike></h1>

HTML5：

<h1>Partial <del>stricken</del></h1>

Answer 5

<h1 >
    <span class="strikethrough">stricken</span><span class="no-strikethrough"> no strike</span>
</h1>

Answer 6

我不知道它是否对你有用，但你可以尝试敲击 span 的内部。

<h1 class="no-strikethrough">
   <span class="strikethrough">stricken</span> no strike
</h1>

Answer 7

尝试它是最优化的方法

<h1>stricken
    <span class="test">no strike</span>

</h1>

.test {
    text-decoration: line-through !important;
    color: blue;
}

h1  {
    text-decoration: none;
    color: red;
}