CSS特定id伪类的属性？

Posted 2023-03-06

【中文标题】CSS特定id伪类的属性？

【英文标题】：CSS a property for specific id pseudo class?

【发布时间】：2012-06-27 04:40:10

【问题描述】：

任何人都知道如何将 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;

【问题讨论】：

能否包含相关的html？

【参考方案1】：

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

#parentId a 
    /* specific CSS styles */

JS Fiddle demo.

这当然不是pseudo-class（包括:hover、:checked、:focus）或pseudo-element（即::before 和::after） .这是简单的继承，根据祖先选择元素，这就是#parentId 和a 之间的空格。

如果在 div 和 a 之间没有其他祖先/后代，则可以改为使用 > 直接子组合子。

参考资料：

CSS selectors, at the W3.org。

【参考方案2】：

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

ID selector Class selector Pseudo-class

如果您只想在 a 是 div 和 router_li 类（如 <div class="router_li">）时应用此特定 :hover（这是一个伪类），请使用

.router_li a:hover

不过，这是一门课；如果是 ID（如<div id="router_li">），请使用

#router_li a:hover

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

【参考方案3】：

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