方法二：控制链接（以及光标）的样式
有时候更改标记以及从“You Are Here”按钮中移除 ＜a＞ 标签并不是很方便。例如，导航按钮的标签可能是动态生成的；或者可能是包含在服务器端的 include 文件中的，而并没有直接包含在它将要呈现给浏览器的页面中。在这种情况下，从一个按钮中移除 ＜a＞ 标签以及控制其 ＜li＞ 的样式就显得不大实际。相应的，你需要通过控制选定按钮的 ＜a＞ 标签的样式来创建“You Are Here”效果。
一般情况下，这种效果是可以通过为每个按钮分配一个唯一的 ID，然后使用基于 ID 的选择器（selector）控制当前页面的“You Are Here”按钮的样式来实现。定义“You Are Here”按钮的样式可以嵌在文档头中，也可以存储在页面指定的样式级联表中，以使它只对一个页面有效。
如果“You Are Here”按钮的标记包含一个超链接并且导航栏中的其它按钮包含滚翻效果，那么你就需要为“You Are Here”按钮的每个链接状态定义相应的样式。否则的话，“You Are Here”按钮也会出现滚翻效果。实现这一要求的最简单的方法是为所有的链接状态创建一个带有选择器的样式，再创建一组规则声明集合。
即使在创建一组控制“You Are Here”按钮外观的样式之后，还会有很明显的信息显示出它依然是一个活动的超链接——当访问者当光标指向这个按钮时，光标会变成小手的形状。Mike Rundle 的一篇文章“Hoverless Current Links（不可悬停的光前链接）”提醒我经常被忽视的一个 CSS 属性可以让你对光标的形状进行一些控制，从而允许你覆盖光标的一般行为——即在将光标悬停在超链接之上时它会从箭头形状变成小手形状。
通过添加一个 cursor:default规则到“You Are Here”按钮的样式中，你可以抵消光标的形状变化，从而有效地隐藏“You Are Here”按钮包含超链接的事实。事实上超链接并没有被移除，但是它移除了将光标形状变为小手的视觉效果，从而告诉访问者这上一个不可点击的按钮。
下面是使用上面的方法实现的“You Are Here”按钮示例的 XHTML 标记，如图B所示。注意标记中每个按钮的 ID。还请注意这个标记没有变化——在每个页面中它都保持相同。
＜div id="menu"＞
＜ul＞
＜li＞＜a id="btn1" href="Link1-T2.html"＞Button 1＜/a＞＜/li＞
＜li＞＜a id="btn2" href="YouAreHere-T2.html"＞Button 2＜/a＞＜/li＞
＜li＞＜a id="btn3" href="Link3-T2.html"＞Button 3＜/a＞＜/li＞
＜/ul＞
＜/div＞
下面是针对这个页面的 CSS 代码，在这个页面中Button 2 使用样式技术制作成为“You Are Here”按钮：
div#menu {
height: auto;
width: 150px;
color: #FFFFFF;
}
#menu li {
height: 40px;
width: 125px;
margin: 10px;
font-family: Arial, Helvetica, sans-serif;
font-size: small;
text-align: center;
line-height: 250%;
list-style-type: none;
background-color: #003399;
border: 1px solid #000000;
}
#menu li a {
display: block;
width: 100%;
height: 100%;
text-decoration: none;
}
#menu li a:link, #menu li a:visited {
font-weight: normal;
color: #FFFFFF;
}
#menu li a:hover {
font-weight: bold;
color: #FFFFFF;
text-decoration: underline;
}
a#btn2:link, a#btn2:visited, a#btn2:hover {
color: #000099;
background-color: #66CCFF;
font-weight:normal;
text-decoration:none;
cursor:default;
}
注意，用于按钮的样式（从 div#menu到 #menu li a:hover）与前面的一样。两者的区别是 #menu li.youarehere已经被 #menua#btn2:link、#menu a#btn2:visited、#menu a#btn2:hover样式所代替。多个选择器（selector）引起相同的样式应用到所有的滚翻状态。除了定义颜色和背景颜色之外，这个样式中还包含一些规则，用于改变其它按钮滚翻状态的属性。cursor:default属性防止光标在悬停于按钮上时改变形状。
在这个特定的例子中，使用该法并没有什么优点。相反，控制滚翻状态和光标样式的 CSS 代码明显比第一种方法要长。然而，当“You Are Here”按钮的文本没有包含在一个可以方便定位的标签而只有 ＜a＞ 标签时，这种方法则相当便捷。在这种情况下，控制“You Are Here”按钮的 ＜a＞ 标签的样式明显要比将其替换为其它标签（比如说 ＜div＞ 或 ＜li＞ 标签）并完全控制那个标签的样式要简单和容易。对“You Are Here”按钮和其余按钮使用相同的标签通常意味着你可以为其它按钮使用更多常用的样式规则（height、width、borders），而不必将它们包含在“You Are Here”样式中。
