css - 不工作的 CSS 选择器

Question

我的脑袋快要爆炸了。请检查这个 fiddle :

http://jsfiddle.net/337C7/1/

section ul li {
    text-decoration: underline;
}

section ul li ul li {
    text-decoration: none !important;
}

基本上我有一个无序列表，里面还有另一个。我只是想删除 child ul 上的文字装饰。无论出于何种原因，它都不想工作。我是不是很傻？

Answer 1

根据 MDN :

Text decorations draw across descendant elements. This means that it is not possible to disable on a descendant a text decoration that is specified on one of its ancestors.

For example, in the markup: <p>This text has <em>some emphasized words</em> in it.</p> the style rule:p { text-decoration: underline } would cause the entire paragraph to be underlined. However, the style rule: em { text-decoration: none } would not cause any change; the entire paragraph would still be underlined. (However, the rule em { text-decoration: overline } would cause a second decoration to appear on "some emphasized words".)