Question

（注意：当我开始这个问题时，我还没有解决它，但现在已经解决了它，我想了解为什么/如何以一种方式工作而不是另一种方式）

我想添加一个指向菜单栏中当前菜单项的CSS三角形。我从this answer借来的，我得到了一个有效的解决方案（在jsfiddle上）。

但是当我拿到底部CSS的代码时

li .selected::after

并将其放入我的wordpress CSS中，它没有用。

我搞砸了wordpress课程，我玩了一个多小时，无法确定为什么它不起作用。当我删除li并将id字段放入其中后，它就可以了。我一直在玩它，最后通过移除空间并制作它来找到一个有效的解决方案：

li.selected::after。

我遇到的问题是，在jsfiddle上它只有在元素和类之间有空格时才有效，但在wordpress中，它只有在它们之间没有空格时才有效。

我对CSS和它的语法不太好，但哪个（更多？）正确？

HTML：

<nav class="special-nav">
    <ul class="menu">
        <li><a href="#" class="menu-item">One</a></li>
        <li><a href="#">Two</a></li>
        <li><a href="#" class="menu-item selected">Three</a></li>
        <li><a href="#" class="menu-item">Four</a></li>
        <li><a href="#">Five</a></li>
    </ul>
</nav>
<p>blah blah blah</p>

CSS：

.menu {
    list-style: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color:#000;
}
.menu li {
    float: left;
}
.menu a {
    position: relative;
    display: block;
    padding: 1em;
    text-decoration: none;
    color: #fff;
}
li .selected::after {
    content:' ';
    position: absolute;
    border: solid 10px transparent;
    left: 50%;
    bottom:0px;
    margin-left: -10px;
    border-color: transparent transparent #fff transparent;
}

编辑：@rnevius将其打成一个，这里是来自wordpress的同一部分的HTML（该类是li的一部分，而不是它的一个孩子。非常感谢。

<li id="menu-item-94" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-94"><a href="/">Home</a></li>

Answer 1

语法就像这样......

li和类选择器之间的空格意味着：

我的目标是li内的DIFFERENT（子）元素，其类为.selected。

没有空间，你会说：

我的目标是li元素class="selected"。

很简单，一个空格意味着你不再引用相同的元素了。小提琴和WordPress之间的不同之处在于，HTML的方式之间存在实际差异在WordPress页面上生成元素（和类）。

有关更多技术信息，请参阅规范中的parsing。

为wordpress菜单生成CSS三角形

1 个答案: