html - 如何将伪类（活动）附加到

Question

我正在使用伪类来装饰我的 xxx。我的问题是，如何迫使其中一个在一开始就活跃起来。

我有两个 <div>...</div> 如下：

<div id="A"></div>
<div id="B"></div>

我已经通过遵循 css 代码来设置它们的样式：

#A {
    background: url('/xxx/xxx.png') 0 0 no-repeat;
}
#A:hover {
    background: url('/xxx/xxx_hover.png') 0 0 no-repeat;
}
#A:active {
    background: url('/xxx/xxx_active.png') 0 0 no-repeat;
}

#B {
    background: url('/xxx/xxx.png') 0 0 no-repeat;
}
#B:hover {
    background: url('/xxx/xxx_hover.png') 0 0 no-repeat;
}
#B:active {
    background: url('/xxx/xxx_active.png') 0 0 no-repeat;
}

我想在页面加载后激活 B，我该怎么做？谢谢。

Answer 1

不确定是否已经有另一种（“更合适”）的方式。但这就是我通常这样做的方式：

#A.active,
#A:active {
    background: url('/xxx/xxx_active.png') 0 0 no-repeat;
}

<div id="A" class="active"></div>

这假设您在必要时使用脚本来删除该类。或者，当请求另一个页面时，该类设置在后端的另一个元素上。