Question

我只需要使用CSS，只使用类默认为最后一个li着色。编辑HTML不是一种选择。 IE9 +很好。如何仅为最后一个链接着色？这只是一个示例，菜单是动态的，因此使用最后一个孩子或指定确切的最后一个链接不是一个选项。我有一个这样的导航菜单：

<ul>
    <li class="default">
        <a href="#">About Us</a>
        <ul>
            <li class="default">
                <a href="#">Where we live</a>
                <ul>
                    <li class="default">
                        <a href="#">Make this link red only</a>
                    </li>
                    <li>
                        <a href="#">Directions</a>
                    </li>
                </ul>
            </li>
        </ul>
     </li>
 </ul>

Answer 1

对于纯CSS方法，IE9支持这些伪选择器。这也可以在jquery之类的东西中起作用。但是，此代码的问题在于，如果您有多个默认值，那么它会为那些设置颜色。

li.default > a:only-child {
  color:red;            
}

Answer 2

我认为this PHP solution在你的情况下是最好的（here's a PHPfiddle demo我做了：点击'跑'并等待几秒钟。）

要实现此目的，请将其添加到HTML文件的顶部：

<?php $thisPage='Make this link red only'; ?>
<html><head>

然后将此PHP（在<?php和?>标记内）添加到所有导航项中：

     <ul>
        <li <?php if ($thisPage=='About Us') echo ' id="currentpage"'; ?>>
            <a href="#">About Us</a>
            <ul>
                <li<?php if ($thisPage=='Where we live') 
          echo ' id="currentpage"'; ?>>
                    <a href="#">Where we live</a>
                    <ul>
                        <li<?php if ($thisPage=='Make this link red only') 
          echo ' id="currentpage"'; ?>>
                            <a href="#">Make this link red only</a>
                        </li>
                        <li <?php if ($thisPage=='Directions') 
          echo ' id="currentpage"'; ?>>
                            <a href="#">Directions</a>
                        </li>
                    </ul>
                </li>
            </ul>
         </li>
     </ul>

然后将CSS设置为：

#currentpage a { color: red; }

您还必须将index.html重命名为index.php，或者更好的解决方案是使用.htaccess（假设您正在运行Apache服务器）到parse PHP inside HTML个文件

在CSS导航菜单中选择最后一个活动的li类

2 个答案: