代码之家 › 专栏 › 技术社区 › Dorjan

一般的悬停类和伪类

css

Dorjan · 技术社区 · 15 年前

从上一个问题开始,我尝试设置输入标记的样式。

我试过

.as_link {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0px;
}
.as_link:link {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0px;
}
.as_link:visited {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0px;
}
.as_link:hover {
    text-decoration: underline;
    background: #F4F0F0;
}

但是在某个地方读到,您并不打算以这种方式为伪类选择元素,所以我尝试了:

input.as_link {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0px;
}
input.as_link:link {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0px;
}
input.as_link:visited {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0px;
}
input.as_link:hover {
    text-decoration: underline;
    background: #F4F0F0;
}

悬停时仍然没有骰子。标准确实生效,但悬停不起作用。我的问题是:

一般来说,分配伪类的规则是什么?不仅仅是在我上面的例子中,它们只是锚还是可以用于任何元素?

事先谢谢。

编辑:这不是IE的本地问题。这个问题也发生在Opera 9和FF3中。

伊迪丝2:我觉得这和“悬停需要”链接有关,在它之前访问过。如果浏览器周围没有锚定标记,那么它们似乎会忽略链接并进行浏览?这纯粹是猜测,但我想知道它是否有任何优点?

4 回复 | 直到 9 年前

eKek0 15 年前

不仅仅是在我上面的例子中,他们是仅用于锚或您可以使用它们对于任何元素?

不,CSS伪类用于向某些选择器添加特殊效果。

伪类的语法:

selector:pseudo-class {property:value}

CSS类也可以与伪类一起使用:

selector.class:pseudo-class {property:value}

锚定伪类

在支持CSS的浏览器中,链接可以以不同的方式显示:

a:link {color:#FF0000} /* unvisited link */
a:visited {color:#00FF00} /* visited link */
a:hover {color:#FF00FF} /* mouse over link */
a:active {color:#0000FF} /* selected link */

伪类可以与CSS类组合使用:

a.red:visited {color:#FF0000}

<a class="red" href="css_syntax.asp">CSS Syntax</a>

如果已访问上述示例中的链接,则该链接将显示为红色。

第一个子伪类

:first子伪类与另一个元素的第一个子元素的指定元素匹配。

在下面的示例中,选择器匹配任何

元素,它是任何元素的第一个子元素:

<html>
  <head>
    <style type="text/css">
    p:first-child
    {
      color:blue
    }
    </style>
</head>

  <body>
    <p>I am a strong man.</p>
    <p>I am a strong man.</p>
   </body>
</html>

伪类数字表示在哪个CSS版本中定义了属性(css1或css2)。

:active      Adds a style to an element that is activated   1
:first-child Adds a style to an element that is the first child of 
             another element    2
:focus   Adds a style to an element that has keyboard input focus   2
:hover   Adds a style to an element when you mouse over it  1
:lang    Adds a style to an element with a specific lang attribute  2
:link    Adds a style to an unvisited link  1
:visited     Adds a style to a visited link     1

更多信息 here.

Santi 15 年前

如果您正在寻找通常分配伪类的规则,此链接将帮助您: http://www.w3.org/TR/CSS2/selector.html#dynamic-pseudo-classes

David Thomas 15 年前

对于您喜欢的任何元素,您都可以使用伪选择器,不管是浏览器/用户代理解释还是应用它们,遗憾的是,完全取决于它们。

有关CSS伪选择器的详细评论(我找不到一个特别限于伪选择器的评论)已在: Quirksmode .

简而言之,IE6是 :hover 和 :active 除了链接外,其他任何东西都可以使用;ie 7的性能稍好一些,但只支持 主动的 非链接。

对于CSS2.1伪选择器来说,IE8似乎非常符合规范。

Dorjan 15 年前

我想我刚找到答案……

我的代码有缺陷。

input.as_link:hover {
    text-decoration: underline;
    background: yellow;
}
input.as_link:focus {
    text-decoration: underline;
    background: yellow;
}
input.as_link:focus:hover {
    text-decoration: underline;
    background: yellow;
}

下划线不起作用,因为它不是“文本”,并且文本没有突出显示。可惜,我选择的背景色没有出现…我想我打错了(或者和背景一样)。亮黄色起作用了。

感谢所有回复的人!