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

I need to color ONLY the last li with the class default using only CSS. Editing the HTML is not an option. IE9+ is fine. How do I color only the last link? This is just an example and the menu is dynamic so using last child or specifying the exact last link is not an option. I have a nav menu like this:

我只需要用CSS为最后一个li上色。编辑HTML不是一个选项。IE9 +很好。如何只给最后一个链接上色?这只是一个例子，菜单是动态的，所以使用last child或指定最后一个链接不是一个选项。我有一个导航菜单像这样:

<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>

2 个解决方案

#1

As for a pure CSS approach, IE9 supports these pseudo selectors. This could also work in something like jquery as well. However, the problem with this code is if you have more than one default, then it would colour those.

至于纯粹的CSS方法，IE9支持这些伪选择器。这也可以使用jquery之类的工具。但是，此代码的问题是，如果您有多个默认值，那么它将为这些值着色。

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

#2

-1

I think that this PHP solution would be best in your case (here's a PHPfiddle demo I made: hit 'Run' and wait a few seconds).

我认为这个PHP解决方案在您的情况下是最好的(这里是我做的PHPfiddle演示:点击“Run”并等待几秒钟)。

To implement this, add this to the top of your HTML file:

要实现这一点，请将其添加到HTML文件的顶部:

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

And then add in this PHP (inside the <?php and ?> tags) to all of your navigation items:

然后添加这个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>

And then set your CSS to:

然后将CSS设置为:

#currentpage a { color: red; }

You'll also have to rename your index.html as index.php, or the better solution would be to use .htaccess (assuming you're running an Apache server) to parse PHP inside HTML files.

您还必须重命名索引。html作为索引。php，或者更好的解决方案是使用.htaccess(假设您正在运行一个Apache服务器)在HTML文件中解析php。

#1