生成一個wordpress菜單的CSS三角形

（注意：當我開始這個問題時我沒有解決它，但現在已經解決了它，我想了解爲什麼/它是如何工作的一種方式而不是其他）生成一個wordpress菜單的CSS三角形

我想添加一個指向菜單欄中當前菜單項的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打於一體，這裏的HTML從WordPress的換同款（類是其中的一部分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>

件

來源

2014-11-14 Madivad

語法作品是這樣的...

li和類選擇之間的間隙表示：

我針對不同的（子）元件，li內，有一類.selected 。

沒有空格，你說：

我針對具有class="selected"一個li元素。

很簡單，空間意味着你不再指同一元素。小提琴和WordPress之間的事情會有所不同的唯一原因是如果在WordPress頁面上生成HTML元素（和類）的方式存在實際差異。

查看parsing的規格，瞭解更多技術信息。

來源

2014-11-14 10:29:34 rnevius

謝謝，這很清楚，並表明，我已經包括了wordpress html驗證你在說什麼。這個類是列表項的一部分，而在我的jsfiddle中，我做了不同的處理。再次感謝 – Madivad

，我顯然需要檢查我的眼睛（即m！= rn）:) – Madivad

Stack Overflow有一個糟糕的字體。所有的時間都會發生;-) – rnevius

生成一個wordpress菜單的CSS三角形

回答

相關問題