diff options
author | Florian Merz <me@fiji-flo.de> | 2021-02-11 12:56:40 +0100 |
---|---|---|
committer | Florian Merz <me@fiji-flo.de> | 2021-02-11 12:56:40 +0100 |
commit | 310fd066e91f454b990372ffa30e803cc8120975 (patch) | |
tree | d5d900deb656a5da18e0b60d00f0db73f3a2e88e /files/zh-cn/web/css/css_selectors | |
parent | 8260a606c143e6b55a467edf017a56bdcd6cba7e (diff) | |
download | translated-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.html | 43 | ||||
-rw-r--r-- | files/zh-cn/web/css/css_selectors/using_the__colon_target_pseudo-class_in_selectors/index.html | 68 |
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> <h1 id="one"> </code>成为目标元素。 注意,由于目标元素有可能会被放置到浏览器窗口的顶层,因此文档可能会跳到新的滚动位置。</p> + +<div id="example"> +<pre><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></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> |