不工作的 CSS 选择器答案

【问题标题】：Not working CSS selector不工作的 CSS 选择器
【发布时间】：2013-12-12 07:06:42
【问题描述】：

我的头快要爆炸了。请检查这个小提琴：

section ul li {
    text-decoration: underline;
}

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

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

【问题讨论】：

很奇怪，看看这个：jsfiddle.net/337C7/17
用标签包裹你的下划线文本并应用下划线怎么样？
Span 也是我的建议 - 特别是如果第二个 ul 与它所在的 li 有关。
用边框代替文本装饰怎么样（还需要浮动和清除）？
@MatthewRapati 是的，这真的很奇怪

标签： css list selector children

【解决方案1】：

虽然浏览器可能会毫无问题地呈现它，但某些浏览器会呈现文本装饰，并被包含元素（在本例中为<li>。@Matthew Rapati 的评论证明了这一事实）。例如，这是来自 MDN 关于该问题的文章（为了完整性，借用 j08691 的答案）：

文本装饰跨越后代元素。这意味着它无法在后代上禁用文本装饰在其祖先之一上指定。

例如，在标记中：This text has some emphasized words in it. 样式规则：p { text-decoration: underline } 会导致整个段落被下划线。不过，风格规则：em { text-decoration: none } 不会引起任何变化；这整个段落仍将加下划线。（但是，em { text-decoration: overline } 规则会导致出现第二个装饰关于“一些强调的词”。）

您应该简单地将子 <ul> 作为兄弟，而不是 <li> 的子，例如：

<ul>
    <li>bla</li>
    <li>bla bla </li>
    <ul>
        <li>bla bla bla</li>
        <li>bla bla bla bla </li>
        <li>bla bla bla bla bla</li>
        <li>bla bla bla bla bla bla</li>
    </ul>
</ul>

然后您应该按如下方式更新您的选择器：

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

你可以看到一个工作的jsFiddle Demo

【讨论】：

但那是无效的 HTML？
我认为<ul> 的唯一孩子可能是<li>
正确。但正如我们已经在 MDN 的评论中强调的那样，这是解决您的问题的唯一方法。
错误的文本项。看看我的回答。
所以最好的方法可能是添加一个跨度吧？既然
bla bla

不正确，对吧？

【解决方案2】：

section ul li /* descendants including direct children */ {
    text-decoration: underline;
}

section>ul>li /* children */ {
    text-decoration: none;
}

在为后代设置样式后，为孩子使用孩子选择器。我不确定你是想要装饰孩子还是孩子的后代，所以我的规则可能会颠倒过来。但是子选择器会在后代之后进行，因此不需要 !important 规则。

根据您的小提琴更新

col-md-12 col-sm-12 >ul>li /* children */ {
        text-decoration: none;
    }

或

section>div>div>div>ul>li /* children */ {
    text-decoration: none;
}

【讨论】：

【解决方案3】：

您可以使用border 代替text-decoration。您需要float 和clear，因为<li> 是块级别。这样您就不必更改任何 HTML。

section ul li {
  border-bottom: 1px solid #000;
  float: left;
  clear: both;
} 

section ul ul li {
  border: none; 
}

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

【讨论】：

【解决方案4】：

试试这个：http://jsfiddle.net/337C7/30/

HTML：

                  <ul>
                        <li>bla</li>
                        <li>bla bla </li>
                            <ul>
                                <li>bla bla bla</li>
                                <li>bla bla bla bla </li>
                                <li>bla bla bla bla bla</li>
                                <li>bla bla bla bla bla bla</li>
                            </ul>
                      </ul>

CSS

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

【讨论】：

但我认为那不是有效的 HTML，它可能会破坏其他内容。

【解决方案5】：

在第一组 li 元素内的文本周围添加一个 span 元素。然后更改 css，以便以跨度而不是 li 为目标。如果你给 li 元素添加一个类，你的 css 会更容易阅读。

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

html:

<ul class="first">
                        <li class="first-item"><span>bla</span></li>
                        <li class="first-item"><span>bla bla </span>
                            <ul class="second">
                                <li>bla bla bla</li>
                                <li>bla bla bla bla </li>
                                <li>bla bla bla bla bla</li>
                                <li>bla bla bla bla bla bla</li>
                            </ul>
                        </li>
                    </ul>

css:

.first-item > span{text-decoration: underline;}

【讨论】：

【解决方案6】：

根据MDN：

文本装饰跨越后代元素。这意味着它无法在后代上禁用文本装饰在其祖先之一上指定。

例如，在标记中：This text has some emphasized words in it. 样式规则：p { text-decoration: underline } 会导致整个段落被下划线。不过，风格规则：em { text-decoration: none } 不会引起任何变化；这整个段落仍将加下划线。（但是，em { text-decoration: overline } 规则会导致出现第二个装饰关于“一些强调的词”。）

【讨论】：

1+ 不错的发现。我正在寻找那个。
+1。我借用了这个示例作为我的解决方案 - 希望你不会介意。
在 li 元素中使用 span 可以防止这种情况发生。然后它将类似于下拉菜单。

【解决方案7】：

文本装饰没有工作。但是上面未闭合的 li 正在影响下面的 li。

【讨论】：