Question

此标签集适合我。但我不理解CSS逻辑及其背后的语义。特别是最后一个CSS项目（我认为！）有助于保持最后点击的标签突出显示，直到你点击下一个。有人可以解释一下。

这是css：

/* <<<<<<<<<<<<<<<<<<< start menu_ main >>>>>>>>>>>>>>>>>>>>>*/
#tabmenu 
{   margin: 0;
    padding: 0;
    list-style-type: none;
}

#tabmenu li 
{   float: left;
    display: block;
    overflow: hidden;
    line-height: 1.6em;
    padding: 0px 5px 0px 5px;
}

#tabmenu a
{   display: block;
    color: #ffffff;
    background: #E28F58; /*brown*/
    /*border-bottom: 1px solid #333333;*/
    text-decoration: none; 
    padding:0 12px 0 12px; 
}

#tabmenu a:hover 
{   background: #333333;
    border-bottom: 3px solid #333333; 
}

#tabmenu a.active, #tabmenu a.active:hover 
{   background: #333333;
    border-bottom: 3px solid #333333;
}

/* <<<<<<<<<<<<<<<<<<< end menu_main >>>>>>>>>>>>>>>>>>>>>*/

以下是索引页面的HTML：

<ul id="tabmenu">
<li><a class="active" href="index.html">Home</a></li>
<li><a href="programs_ar.html">Programs</a></li>
<li><a href="students.html">Student Work</a></li>
<li><a href="research.html">Research</a></li>
<li><a href="staff.html">Staff</a></li>
<li><a href="about_activity.html">About Us</a></li>
<li><a href="contact.html">Contact Us</a></li>
</ul>

Answer 1

#tabmenu a.active, #tabmenu a.active:hover 
{   background: #333333;
    border-bottom: 3px solid #333333;
}

<a>标记可以是3种状态中的1种。

未访问：这是默认状态。
访问：如果您之前点击它，则更改其颜色。
有效：当前点击的<a>

CSS规则告诉浏览器更改#tabmenu中任何活动<a>的背景。

表示您当前正在激活的<a>将被“突出显示”。

该规则还规定，如果将鼠标悬停在此激活的<a>上，它将具有此背景颜色。

因此，当您点击另一个<a>时，新点击的<a>将会被激活<a>，因此它将采用该背景颜色，之前的<a>将会是一个被访问的<a>，因此它不会采用那种颜色。

Answer 2

据推测，每个页面都在单个菜单项上设置“活动”类，然后由以下选择器匹配：

#tabmenu a.active
{   background: #333333;
    border-bottom: 3px solid #333333;
}

当您导航到带有新标记的新页面时，旧选择将“丢失”，而class="active"的所有元素现在都与选择器匹配。

示例：

<!-- you've marked the "home" link as active -->
<a class="active" href="index.html">Home</a>

<!-- user clicks another link -->
<!-- browser navigates -->

<!-- on this page, "student work" has a class name of "active" -->
<a class="active" href="students.html">Student Work</a>

<!-- "home" is no longer selected; "student work" is -->

换句话说：任何类名为“active”的锚都将与选择器匹配。没有什么可以防止匹配多个项目，例如this example。

解释这个css代码是如何工作的

2 个答案: