From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/zh-cn/web/css/_colon_visited/index.html | 171 ++++++++++++++++++++++++++ 1 file changed, 171 insertions(+) create mode 100644 files/zh-cn/web/css/_colon_visited/index.html (limited to 'files/zh-cn/web/css/_colon_visited') diff --git a/files/zh-cn/web/css/_colon_visited/index.html b/files/zh-cn/web/css/_colon_visited/index.html new file mode 100644 index 0000000000..8ebd4f7e46 --- /dev/null +++ b/files/zh-cn/web/css/_colon_visited/index.html @@ -0,0 +1,171 @@ +--- +title: ':visited' +slug: 'Web/CSS/:visited' +tags: + - CSS + - 伪类 + - 布局 +translation_of: 'Web/CSS/:visited' +--- +

{{CSSRef}}

+ +

概述

+ +

:visited CSS伪类表示用户已访问过的链接。出于隐私原因，可以使用此选择器修改的样式非常有限。

+ +
/* 所有被访问过的 <a> 变绿 */
+a:visited {
+  color: green;
+}
+
+ +

这个样式可能会被后声明的其他链接相关的伪类覆盖，这些伪类包括 ({{cssxref(":link")}}, {{cssxref(":hover")}},和{{cssxref(":active")}})。要适当地设置链接样式，请将:visited 规则放在:link 规则之后，但在:hover 和:active 规则之前，参照 LVHA 顺序::link — :visited — :hover — :active。

+ +

限制

+ +

出于隐私原因，浏览器严格限制您可以让此伪类应用的样式，以及使用它们的方式：

+ + + +
+

注意：有关这些限制及其背后原因的更多信息，请参阅 Privacy and the :visited selector。

+
+ +

示例

+ +

未设置颜色或透明的属性不能使用:visited。 在可以使用此伪类设置的属性中，浏览器可能只有color和column-rule-color两个默认值。 因此，对于其他属性，在使用:visited选择器前，应该先为这些属性设置基础样式。 

+ +

HTML

+ +
<a href="#test-visited-link">你是否访问过此链接？</a>
+<a href="">你已经访问过此链接。</a>
+ +

CSS

+ +
a {
+  /* 指定某些属性的默认值，允许他们使用：visited状态进行样式设置 */
+  background-color: white;
+  border: 1px solid white; 
+}
+
+a:visited {
+  background-color: yellow;
+  border-color: hotpink;
+  color: hotpink;
+}
+
+ +

结果

+ +

{{ EmbedLiveSample('示例', '', '', '', 'Web/CSS/:visited') }}

+ +

规范

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatus +

Comment

+
{{ SpecName('HTML WHATWG', 'scripting.html#selector-visited', ':visited') }}{{ Spec2('HTML WHATWG') }}
{{ SpecName('CSS4 Selectors', '#link', ':visited') }}{{ Spec2('CSS4 Selectors') }}无变化。
{{ SpecName('CSS3 Selectors', '#link', ':visited') }}{{ Spec2('CSS3 Selectors') }}无变化。
{{ SpecName('CSS2.1', 'selector.html#link-pseudo-classes', ':visited') }}{{ Spec2('CSS2.1') }}取消:visited只适用于 {{ HTMLElement("a") }} 元素的限制。由于隐私原因，浏览器会限制该行为。
{{ SpecName('CSS1', '#anchor-pseudo-classes', ':visited') }}{{ Spec2('CSS1') }}初次定义。
+ +

浏览器兼容性

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support1.0{{ CompatGeckoDesktop("1.0") }}3.53.51.0
Restrictions in CSS properties allowed in a statement using :visited6{{CompatGeckoDesktop("2.0") }}8 (or earlier){{ CompatUnknown() }}5.0
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support{{ CompatUnknown() }}{{ CompatGeckoMobile("1.0") }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+ +

参见

+ + -- cgit v1.2.3-54-g00ecf