在 span 中使用 CSS 类来设置当前菜单状态？

Question

我正在学习 CSS 和 html，并坚持在单击项目后保留悬停/活动状态的外观。我查看了该站点上的几篇文章，但无法将课程应用于我的应用程序。我还在这里找到了解决方案http://www.456bereastreet.com/archive/200503/setting_the_current_menu_state_with_css/，但它对我不起作用（我会认为这是我的错）。

另一个来源建议使用我目前正在尝试的跨度类。我想要具有相同的悬停颜色（#fff），重量（粗体），以及在选择菜单项时使用的背景图像以显示用户究竟在哪里（这是辅助栏杆NAV并进入使用在那些主导航有一个带有多个选项的下拉菜单的页面上）。对我有用的唯一特征是粗体文本。您可以在此处查看正在进行的工作：

http://www.mentalwarddesign.net/dynamec/About/index.html

我假设我在跨度中创建的类被覆盖了，但我对补救措施一无所知。任何和所有的帮助将不胜感激。

以下是 li 的代码，然后是相应的 CSS。提前致谢！

<ul class="nav">
<span class="chosen"><li><a href="index.html" id="nav-whatwedo">What We Do</a></li></span>
<li><a href="howitstarted.html" id="nav-howitstarted">How It Started</a></li>
<li><a href="whoweare.html" id="nav-whoweare">Who We Are</a></li>
<li><a href="whatweknow.html" id="nav-whatweknow">What We Know</a></li>
</ul>

.chosen {
font-weight: bold;
color: #ffffff;
background-image: url(../imgGlobal/bulletRight.jpg);
background-repeat: no-repeat;
display: block;
padding-left: -12px;
background-position: 168px;
}
.content ul, .content ol {
padding: 0 15px 15px 40px;
background-color: #fff;
}
ul.nav {
list-style: none;
}
ul.nav li {
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #464646;
height: 50px;
background-color: #000;
}
ul.nav a, ul.nav a:visited {
display: block;
width: 160px;
text-decoration: none;
padding-top: 12px;
padding-right: 5px;
padding-left: 15px;
}
ul.nav a:hover, ul.nav a:active, ul.nav a:focus {
color: #ffffff;
font-weight: bold;
height: 38px;
background-image: url(../imgGlobal/bulletRight.jpg);
background-repeat: no-repeat;
background-position: 168px;
}

Answer 1

Ed，CSS 选择器:active 的意思是“被激活（例如被点击）”，而不是“具有解析为当前页面 URL 的 href 属性”。您可以使用服务器端逻辑插入 class=”chosen” 或类似的。例如：

<li class="chosen"><a href="index.html">What We Do</a></li>

还有，CSS 样式：ul.nav li.chosen a { }

您提供的教程链接中提到了另一种方法，但这不是一个很好的例子。

Answer 2

首先，您不能将li 包裹在span 中。 ul 的唯一直接后代是 li。您可以将chosen 类直接放到li 上就可以了。

<ul class="nav">
    <li class="chosen"><a href="index.html" id="nav-whatwedo">What We Do</a></li>
    <li><a href="howitstarted.html" id="nav-howitstarted">How It Started</a></li>
    <li><a href="whoweare.html" id="nav-whoweare">Who We Are</a></li>
    <li><a href="whatweknow.html" id="nav-whatweknow">What We Know</a></li>
</ul>

Answer 3

将chosen 类放入li 元素本身。完全放弃span。

编辑： 抱歉，在a 元素中，我的意思是说。

Answer 4

span 是一个标签，一个类只是一个标识符。除了可以使用一个类将样式应用于跨度之外，它们之间并没有任何关系，但任何标签都是如此。

在您的情况下，您试图在 li （块级元素）周围放置一个 span （一个内联元素）。在 HTML 中，内联元素不应包含块元素。

您应该可以这样做：EDIT 根据实际 CSS 修复

<li><a href="index.html" class="chosen" id="nav-whatwedo">What We Do</a></li>