0

最近、asp.net サイトのGMetrixで速度テストを実行しましたが、3 つの子孫セレクターを使用してキーにタグを付け、 tag でクラスを過度に修飾する必要があると不平を言い続けています。

たとえば、スタイルシートにこれがあります。

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 に答える