Question

任何人都知道如何将css属性应用于a标签，但只有当它在某个div中时？我希望.router_li div具有悬停效果，但任何其他链接。我不确定这是什么。

我认为它被称为伪类，我做得不对。我试过这个：

a:router_li:hover{
  background-color:yellow;
  width: 200px;
  height: 60px;
  background-color: #2c5fac;
  border: 1px;
  border-color: #FFFFFF;
  border-top-right-radius: 8px;
  border-top-left-radius: 8px;
  border-bottom-right-radius: 8px;
  border-bottom-left-radius: 8px;
  border-style:solid;
  border-width:1px;
  color: white;
}

Answer 1

ID，类和伪类是不同的东西，CSS对所有三种都有不同的表示法：

如果您希望仅在:hover为a且类div的情况下应用此特定router_li（这是一个伪类）（如{{1} }}），使用

<div class="router_li">

但这是一堂课;如果它是一个ID（如在.router_li a:hover中），请使用

<div id="router_li">

在这两种情况下，#router_li a:hover都不是伪类，因为它是在标记中而不是在CSS中定义的，因此代码中的router_li无效。另请注意，ID /类（以较新者为准）位于:router_li之前 - 仅当它位于某个a:hover时才称为上下文选择器a。

Answer 2

使用父id作为选择器的一部分：

#parentId a {
    /* specific CSS styles */
}

JS Fiddle demo

这当然不是pseudo-class（包含:hover，:checked，:focus）或pseudo-element（其中包含::before将是::after和#parentId）。这是简单的继承，选择基于祖先的元素，并且是a和>之间的空间。

如果div和a之间没有其他祖先/后代，您可以使用{{1}}直接子组合子。

参考文献：

CSS selectors, at the W3.org。

Answer 3

.router_li a:hover只会定位.router_li元素中悬停的锚标记

CSS是特定id伪类的属性？

3 个答案: