Question

继我上一期提问后，我试图设计输入标签的样式。

我试过

.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也会出现此问题。

Edit2：我觉得它与悬停需要链接和之前访问过的事实有关。似乎浏览器忽略链接并且如果它们周围没有锚标记则会被访问？这纯粹是猜测，但我想知道它是否有任何优点？

Answer 1

不仅仅是我的情况，而是他们仅限锚点或您可以使用它们对于任何元素？

嗯，不。 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-child伪类匹配另一个元素的第一个子元素。

在以下示例中，选择器匹配任何元素的第一个子元素

元素：

<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.

Answer 2

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

Answer 3

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

css伪选择器的详细评论（我找不到一个特别限于伪选择器的）已经过了：Quirksmode。

简而言之，除了链接之外，IE6在:hover和:active上都存在问题; IE 7的播放效果略好，但只支持非链接上的:active。

IE4似乎非常符合规范，就像css2.1伪选择器一样。

Answer 4

我想我刚刚找到答案......

我的代码存在缺陷。

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;
}

下划线不起作用，因为它不是“文本”而且文本没有突出显示。很遗憾哦，我选择的背景颜色没有出现......我猜我输入的不正确（或与背景相同）。亮黄色起作用。

感谢所有回复的人！

CSS：一般的悬停和伪类

4 个答案: