css - css：在悬停之前设置所有元素的样式

Question

我正在尝试在悬停之前设置所有元素的样式（从左侧）。

这是我的代码：jsFiddle

[CSS]：

a,
a:link,
a:hover,
a:visited {
    /* ... */
    color: #222;
}

a:hover, 
a:hover ~ a {
    color: #f00;
}

[HTML]：

<a href="#">text1|</a>
<a href="#">text2|</a>
<a href="#">text3|</a>

我所做的只是从右侧悬停（在悬停元素之后），但我想要从左侧。

Answer 1

对 html 和 css 稍作改动即可满足您的要求。

HTML：

<div><a href="#">this/</a><a href="#">line/</a><a href="#">is/</a><a href="#">hovering/</a><a href="#">from/</a><a href="#">left/</a><div>

CSS：

a,
a:link,
a:hover,
a:visited,
div {
    text-decoration: none;
    font-size: 14pt;
    background: #def;
    color: #222;
}
div:hover a{
    color: #f00;
}
a:hover ~ a {
    color: #222;
}

jsFiddle

Answer 2

你想以不同的方式设计所有元素吗？

您可以通过 nth-child 选择器选择元素。

例子：

a:nth-child(1){}
a:first-child+a{} or a:nth-child(1) + a /* Second Element */
a:last-child{} /*select last child, Works in ie8+, webkit, moz, o */