0

我最近在GMetrix上为我的 asp.net 站点进行了速度测试，它一直抱怨我应该用 3 个后代选择器标记键，而用标记过度限定的类。

例如，我的样式表中有这个：

div.menu ul li a, div.menu ul li a:visited
{
background-color: #465c71;
border: 1px #4e667d solid;
color: #dde4ec;
display: block;
line-height: 1.35em;
padding: 4px 20px;
text-decoration: none;
white-space: nowrap;
border-radius: 3px; 
z-index:20;
}

div.menu ul li a:hover
{
background-color: #bfcbd6;
color: #465c71;
text-decoration: none;
z-index:20;
}

div.menu ul li a:active
{
background-color: #465c71;
color: #cfdbe6;
text-decoration: none;
z-index:20;
}

或者，例如，速度测试还为此推荐了3 个后代选择器：

/* Top level menu links style */
.sidebarmenu ul li a{
display: block;
overflow: auto; /*force hasLayout in IE7 */
color: #dde4ec;
text-decoration: none;
padding: 6px;
border: 1px #4e667d solid;
border-bottom: 1px solid #4e667d;
border-right: 1px solid #4e667d;
border: 0px solid #800000;
}

.sidebarmenu ul li a:link, .sidebarmenu ul li a:visited, .sidebarmenu ul li a:active{
background-color: #465c71; /*background of tabs (default state)*/
border: 0px solid #800000;
}

.sidebarmenu ul li a:visited{
border: 0px solid #800000;
}

.sidebarmenu ul li a:hover{
background-color: #bfcbd6;
color: #465c71;
border: 0px solid #800000;
}

我对CSS一无所知。有人可以解释一下我如何在这里使用后代选择器，我认为这意味着结合这些东西吗？感谢您提供的任何帮助！

4

1 回答 1

2

我想这是说这个声明是过度限定的

.sidebarmenu ul li a

所以你也可以使用它来简单地给你的<a>元素一个类，例如说.menu_link

现在你可以简单地在你的样式表中使用它

a.menu_link {
   display: block;
   overflow: auto; /*force hasLayout in IE7 */
   color: #dde4ec;
   text-decoration: none;
   padding: 6px;
   border: 1px #4e667d solid;
   border-bottom: 1px solid #4e667d;
   border-right: 1px solid #4e667d;
   border: 0px solid #800000;
}

a.menu_link:link, a.menu_link:visited, a.menu_link:active{
   background-color: #465c71; /*background of tabs (default state)*/
   border: 0px solid #800000;
}

a.menu_link:visited{
   border: 0px solid #800000;
}

a.menu_link:hover{
   background-color: #bfcbd6;
   color: #465c71;
   border: 0px solid #800000;
}
于 2012-10-31T18:16:58.047 回答