From 310fd066e91f454b990372ffa30e803cc8120975 Mon Sep 17 00:00:00 2001 From: Florian Merz Date: Thu, 11 Feb 2021 12:56:40 +0100 Subject: unslug zh-cn: move --- .../css_selectors/comparison_with_xpath/index.html | 43 -------------- .../index.html | 68 ++++++++++++++++++++++ 2 files changed, 68 insertions(+), 43 deletions(-) delete mode 100644 files/zh-cn/web/css/css_selectors/comparison_with_xpath/index.html create mode 100644 files/zh-cn/web/css/css_selectors/using_the__colon_target_pseudo-class_in_selectors/index.html (limited to 'files/zh-cn/web/css/css_selectors') diff --git a/files/zh-cn/web/css/css_selectors/comparison_with_xpath/index.html b/files/zh-cn/web/css/css_selectors/comparison_with_xpath/index.html deleted file mode 100644 index c196e077e6..0000000000 --- a/files/zh-cn/web/css/css_selectors/comparison_with_xpath/index.html +++ /dev/null @@ -1,43 +0,0 @@ ---- -title: Comparison of CSS Selectors and XPath -slug: Web/CSS/CSS_Selectors/Comparison_with_XPath -translation_of: Web/XPath/Comparison_with_CSS_selectors ---- -
{{CSSRef("Selectors")}}{{QuickLinksWithSubpages("/en-US/docs/Web/XPath")}}{{Draft}}
- -

本文旨在记录CSS选择器和XPath之间的区别，以便Web开发人员能够更好地为正确的工作选择合适的工具。

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
XPath featureCSS equivalent
ancestor, parent or preceding-sibling axis{{CSSxRef(":has",":has()")}} selector {{experimental_inline}}
attribute axisAttribute selectors
child axisChild combinator
descendant axisDescendant combinator
following-sibling axisGeneral sibling combinator or adjacent sibling combinator
self axis{{CSSxRef(":scope")}} or {{CSSxRef(":host")}} selector
diff --git a/files/zh-cn/web/css/css_selectors/using_the__colon_target_pseudo-class_in_selectors/index.html b/files/zh-cn/web/css/css_selectors/using_the__colon_target_pseudo-class_in_selectors/index.html new file mode 100644 index 0000000000..65883df437 --- /dev/null +++ b/files/zh-cn/web/css/css_selectors/using_the__colon_target_pseudo-class_in_selectors/index.html @@ -0,0 +1,68 @@ +--- +title: '在选择器中使用 :target 伪类' +slug: 'Web/Guide/CSS/Using_the_:target_selector' +tags: + - CSS + - CSS_3 + - Selectors +translation_of: 'Web/CSS/CSS_Selectors/Using_the_:target_pseudo-class_in_selectors' +--- +

{{CSSRef}}

+ +

为了辅助标识那些指向文档特定部分链接的目标, CSS3 选择器 引入了 {{ Cssxref(":target") }} 伪类. Netscape 7.1 已经在 Netscape 系列中加入了这个伪类的支持, 这一新的举措让页面作者能够辅助用户在较大的页面中定位。 

+ +

选择一个目标

+ +

{{ Cssxref(":target") }} 伪类用来指定那些包含片段标识符的 URI 的目标元素样式。 例如, http://developer.mozilla.org/en/docs/Using_the_:target_selector#Example 这个 URI 包含了 #Example 片段标识符。 在HTML中, 标识符是元素的id或者name属性,。由于这两者位于相同的命名空间， 因此， 这个示例 URI 指向的是文档顶层的 "Example" 。

+ +

假设你想修改 URI 指向的任何 h2 元素，但是又不想把样式应用到任何其它同类型的元素，那么以下示例足够简单有用：

+ +
h2:target {font-weight: bold;}
+ +

同样的，将样式应用于特定的文档片段也是可行的。这是通过使用 URI 中相同的标识符实现的。例如，要在 #Example 文档片段中加入边框，我们可以通过如下代码实现： 

+ +
#Example:target {border: 1px solid black;}
+ +

定位所有元素

+ +

如果想要创建应用于所有目标元素的样式，那么可以使用通用选择器：

+ +
:target {color: red;}
+
+ +

示例

+ +

在以下示例中， 5个链接指向了同一文档中的元素。例如，选择 "First" 链接会导致 <h1 id="one"> 成为目标元素。 注意，由于目标元素有可能会被放置到浏览器窗口的顶层，因此文档可能会跳到新的滚动位置。

+ +
+
<h4 id="one">...</h4> <p id="two">...</p>
+<div id="three">...</div> <a id="four">...</a> <em id="five">...</em>
+
+<a href="#one">First</a>
+<a href="#two">Second</a>
+<a href="#three">Third</a>
+<a href="#four">Fourth</a>
+<a href="#five">Fifth</a>
+
+ +

结论

+ +

在片段标识符指向部分文档的情况下，读者可能会对到底应该阅读文档的哪一部分感到疑惑。通过对不同的目标元素的样式进行修饰, 读者的相关疑惑会减少或者消除。

+ + + + + +
+

Original Document Information

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