CSS文本 - 装饰层次结构

Question

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

我正在尝试通过添加span来修改块中的文本修饰，但它无法正常工作。怎么会？我可以在span中添加新的文字装饰，但我不能减去旧的文字装饰。

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

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

有没有办法实现我的目标？我想继承h1 的所有属性，除了文本修饰，所以我更喜欢在该标记内部使用“无删节”文本。

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

你不能以目前的形式做到这一点，你正在对作为跨度的父级的H1进行攻击，你不能让孩子反转它。

Answer 3

删除线适用于整个父元素。它渲染了父级的全宽，无法为孩子“关闭”。

任何不使用HTML标记的原因？

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

HTML5：

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

Answer 4

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

Answer 5

我认为你试图将第一部分保留为atrile而第二部分保持没有罢工。

这样做

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

还有一件事。 如果你只是在CSS中使用类名中的连字符是好的和花花公子，但当你转向Javascript时会导致问题（就我的知识而言）。所以这样练习

Answer 6

我不知道它是否对你有用，但你可能会尝试打击内心。

<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;
}