Question

嗨，我的菜单有一个奇怪的问题。所以我想将这种转换应用于少数几个链接，而其他只是没有它。

以下是没有任何更改的转换CSS：

ul.menu > li > a:after,
ul.drop-down > li > a:after {
  position: absolute;
  content: '';
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  transition: all 0.15s linear;
  -moz-transition: all 0.15s linear;
  -webkit-transition: all 0.15s linear;
  -o-transition: all 0.15s linear;
  background: red;
  border-bottom: 1px solid rgba(0,0,0,0.1);
 }

现在，这将应用于ul中的每个标记，其中包含＆＃34; menu＆＃34;。好的，这很好，但我想将它仅应用于某些链接。所以如果我把 ul.menu＆gt; li> a.foo：after 它会起作用，但如果我使用id ul.menu＆gt; li> a＃foo：在之后它不会起作用。有什么理由呢？

问题在于，如果我坚持使用类foo 而不是使用ID，而不是尝试将类foo应用于.active状态的下一个代码片段不起作用：

ul.menu li a:hover:after,
ul.menu li a.active:after {
  width: 100%;
 }

所以这里如果我应用 ul.menu li a.foo:hover:after和ul.menu li a.foo.active：之后无效。任何想法为什么会这样？

以下是我的链接看起来如何不将类foo放到

<ul class="menu">
    <li><a <?php if ($active_state == 'news'): ?> class="active" <?php endif; ?>           href="bla"><span>News</span></a></li>
    <li><a <?php if ($active_state == 'lounge'): ?> class="active" <?php endif; ?> href="blaa"><span>Lounge</span></a></li>
</ul>

Answer 1

本文包含有关ID和类之间差异的信息。我相信，因为您有多个ul.menu > li > a#foo，这不会使用ID。 ID适用于一个元素。
http://css-tricks.com/the-difference-between-id-and-class/

CSS：为什么我不能在这段代码中使用ID，但是它的类有效吗？

1 个答案: