aboutsummaryrefslogtreecommitdiff
path: root/files/zh-cn/web/css/css_selectors
diff options
context:
space:
mode:
authorFlorian Merz <me@fiji-flo.de>2021-02-11 12:56:40 +0100
committerFlorian Merz <me@fiji-flo.de>2021-02-11 12:56:40 +0100
commit310fd066e91f454b990372ffa30e803cc8120975 (patch)
treed5d900deb656a5da18e0b60d00f0db73f3a2e88e /files/zh-cn/web/css/css_selectors
parent8260a606c143e6b55a467edf017a56bdcd6cba7e (diff)
downloadtranslated-content-310fd066e91f454b990372ffa30e803cc8120975.tar.gz
translated-content-310fd066e91f454b990372ffa30e803cc8120975.tar.bz2
translated-content-310fd066e91f454b990372ffa30e803cc8120975.zip
unslug zh-cn: move
Diffstat (limited to 'files/zh-cn/web/css/css_selectors')
-rw-r--r--files/zh-cn/web/css/css_selectors/comparison_with_xpath/index.html43
-rw-r--r--files/zh-cn/web/css/css_selectors/using_the__colon_target_pseudo-class_in_selectors/index.html68
2 files changed, 68 insertions, 43 deletions
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
----
-<div>{{CSSRef("Selectors")}}{{QuickLinksWithSubpages("/en-US/docs/Web/XPath")}}{{Draft}}</div>
-
-<p class="summary">本文旨在记录CSS选择器和XPath之间的区别,以便Web开发人员能够更好地为正确的工作选择合适的工具。</p>
-
-<table class="standard-table">
- <thead>
- <tr>
- <th scope="col"><a href="/en-US/docs/Web/XPath">XPath feature</a></th>
- <th scope="col"><a href="/en-US/docs/Web/CSS/CSS_Selectors">CSS equivalent</a></th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td><a href="/en-US/docs/Web/XPath/Axes/ancestor"><code>ancestor</code></a>, <a href="/en-US/docs/Web/XPath/Axes/parent"><code>parent</code></a> or <a href="/en-US/docs/Web/XPath/Axes/preceding-sibling"><code>preceding-sibling</code></a> axis</td>
- <td>{{CSSxRef(":has",":has()")}} selector {{experimental_inline}}</td>
- </tr>
- <tr>
- <td><a href="/en-US/docs/Web/XPath/Axes/ancestor"><code>attribute</code></a> axis</td>
- <td><a href="/en-US/docs/Web/CSS/Attribute_selectors">Attribute selectors</a></td>
- </tr>
- <tr>
- <td><a href="/en-US/docs/Web/XPath/Axes/child"><code>child</code></a> axis</td>
- <td><a href="/en-US/docs/Web/CSS/Child_selectors">Child combinator</a></td>
- </tr>
- <tr>
- <td><a href="/en-US/docs/Web/XPath/Axes/descendant"><code>descendant</code></a> axis</td>
- <td><a href="/en-US/docs/Web/CSS/Descendant_selectors">Descendant combinator</a></td>
- </tr>
- <tr>
- <td><a href="/en-US/docs/Web/XPath/Axes/following-sibling"><code>following-sibling</code></a> axis</td>
- <td><a href="/en-US/docs/Web/CSS/General_sibling_selectors">General sibling combinator</a> or <a href="/en-US/docs/Web/CSS/Adjacent_sibling_selectors">adjacent sibling combinator</a></td>
- </tr>
- <tr>
- <td><a href="/en-US/docs/Web/XPath/Axes/self"><code>self</code></a> axis</td>
- <td>{{CSSxRef(":scope")}} or {{CSSxRef(":host")}} selector</td>
- </tr>
- </tbody>
-</table>
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'
+---
+<p>{{CSSRef}}</p>
+
+<p>为了辅助标识那些指向文档特定部分链接的目标, <a class="external" href="http://www.w3.org/TR/css3-selectors/#target-pseudo">CSS3 选择器</a> 引入了<code> {{ Cssxref(":target") }} </code><a href="/en/CSS/Pseudo-classes" title="Pseudo-classes">伪类</a>. Netscape 7.1 已经在 Netscape 系列中加入了这个伪类的支持, 这一新的举措让页面作者能够辅助用户在较大的页面中定位。 </p>
+
+<h3 id="Picking_a_Target" name="Picking_a_Target">选择一个目标</h3>
+
+<p><code>{{ Cssxref(":target") }} 伪类用来指定那些包含片段标识符的 URI 的目标元素样式。</code> 例如, <code><span class="nowiki">http://developer.mozilla.org/en/docs/Using_the_:target_selector#Example</span></code> 这个 URI 包含了 <code>#Example 片段标识符。</code> 在HTML中, 标识符是元素的id或者name属性,。由于这两者位于相同的命名空间, 因此, 这个示例 URI 指向的是文档顶层的 "Example" 。</p>
+
+<p>假设你想修改 URI 指向的任何 h2 元素,但是又不想把样式应用到任何其它同类型的元素,那么以下示例足够简单有用:</p>
+
+<pre>h2:target {font-weight: bold;}</pre>
+
+<p>同样的,将样式应用于特定的文档片段也是可行的。这是通过使用 URI 中相同的标识符实现的。例如,要在 #Example 文档片段中加入边框,我们可以通过如下代码实现: </p>
+
+<pre>#Example:target {border: 1px solid black;}</pre>
+
+<h3 id="Targeting_the_Root_Element" name="Targeting_the_Root_Element">定位所有元素</h3>
+
+<p>如果想要创建应用于所有目标元素的样式,那么可以使用通用选择器:</p>
+
+<pre>:target {color: red;}
+</pre>
+
+<h3 id="Example" name="Example">示例</h3>
+
+<p>在以下示例中, 5个链接指向了同一文档中的元素。例如,选择 "First" 链接会导致<code> &lt;h1 id="one"&gt; </code>成为目标元素。 注意,由于目标元素有可能会被放置到浏览器窗口的顶层,因此文档可能会跳到新的滚动位置。</p>
+
+<div id="example">
+<pre>&lt;h4 id="one"&gt;...&lt;/h4&gt; &lt;p id="two"&gt;...&lt;/p&gt;
+&lt;div id="three"&gt;...&lt;/div&gt; &lt;a id="four"&gt;...&lt;/a&gt; &lt;em id="five"&gt;...&lt;/em&gt;
+
+&lt;a href="#one"&gt;First&lt;/a&gt;
+&lt;a href="#two"&gt;Second&lt;/a&gt;
+&lt;a href="#three"&gt;Third&lt;/a&gt;
+&lt;a href="#four"&gt;Fourth&lt;/a&gt;
+&lt;a href="#five"&gt;Fifth&lt;/a&gt;</pre>
+</div>
+
+<h3 id="Conclusion" name="Conclusion">结论</h3>
+
+<p>在片段标识符指向部分文档的情况下,读者可能会对到底应该阅读文档的哪一部分感到疑惑。通过对不同的目标元素的样式进行修饰, 读者的相关疑惑会减少或者消除。</p>
+
+<h3 id="Related_Links" name="Related_Links">相关链接</h3>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/css3-selectors/#target-pseudo">CSS3 Selectors #target-pseudo</a></li>
+ <li><a class="internal" href="/En/CSS/:target" title="En/CSS/:target">CSS Reference :target</a></li>
+</ul>
+
+<div class="originaldocinfo">
+<h3 id="Original_Document_Information" name="Original_Document_Information">Original Document Information</h3>
+
+<ul>
+ <li>Author(s): Eric Meyer, Standards Evangelist, Netscape Communications</li>
+ <li>Last Updated Date: Published 30 Jun 2003</li>
+ <li>Copyright Information: Copyright © 2001-2003 Netscape. All rights reserved.</li>
+ <li>Note: This reprinted article was originally part of the DevEdge site.</li>
+</ul>
+</div>