diff options
| author | MDN <actions@users.noreply.github.com> | 2022-03-19 00:13:08 +0000 |
|---|---|---|
| committer | MDN <actions@users.noreply.github.com> | 2022-03-19 00:13:08 +0000 |
| commit | 9bf6693b2edd5281c1577856895c55653a41dc01 (patch) | |
| tree | 0143e1d1d5c95776e42d8d9afdddedb13a0827c1 /files/zh-cn/web/css/_colon_host() | |
| parent | 376471eb81e0a3dc263128f834e3c8c22bb9b4d6 (diff) | |
| download | translated-content-9bf6693b2edd5281c1577856895c55653a41dc01.tar.gz translated-content-9bf6693b2edd5281c1577856895c55653a41dc01.tar.bz2 translated-content-9bf6693b2edd5281c1577856895c55653a41dc01.zip | |
[CRON] sync translated content
Diffstat (limited to 'files/zh-cn/web/css/_colon_host()')
| -rw-r--r-- | files/zh-cn/web/css/_colon_host()/index.html | 90 |
1 files changed, 0 insertions, 90 deletions
diff --git a/files/zh-cn/web/css/_colon_host()/index.html b/files/zh-cn/web/css/_colon_host()/index.html deleted file mode 100644 index 5b67042ed0..0000000000 --- a/files/zh-cn/web/css/_colon_host()/index.html +++ /dev/null @@ -1,90 +0,0 @@ ---- -title: ':host()' -slug: 'Web/CSS/:host()' -tags: - - ':host()' - - CSS - - Layout - - Pseudo-class - - RTeference - - Web -translation_of: 'Web/CSS/:host()' ---- -<div>{{seecompattable}}{{CSSRef}} </div> - -<div><a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS">CSS</a> <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/Pseudo-classes"><font>伪类</font></a><font>函数 </font><strong><code>:host()</code></strong><font> 选择包含使用这段 CSS 的 </font><a href="https://developer.mozilla.org/zh-CN/docs/Web/Web_Components/Using_shadow_DOM">Shadow DOM</a><font> 的影子宿主(这样就可以从 Shadow DOM 中选择包括它的自定义元素)——但前提是该函数的参数与选择的阴影宿主相匹配。</font></div> - -<p><font>最简单的用法是仅将类名放在某些自定义元素实例上,然后将相关的类选择器作为函数参数包含在内。</font><font>不能将它与后代选择器表达式一起使用,以仅选择特定祖先内部的自定义元素的实例。这是</font> {{cssxref(":host-context()")}} <font>的作用。</font></p> - -<div class="note"> -<p><strong><font><font>注意</font></font></strong><font><font>:在shadow DOM之外使用时,这没有任何效果。</font></font></p> -</div> - -<pre class="brush: css no-line-numbers">/* <font><font>选择阴影根元素,仅当它</font></font><font><font>与选择器参数匹配</font></font> */ - <code>:host(.special-custom-element) { - font-weight: bold; - }</code></pre> - -<h2 id="句法"><font><font>句法</font></font></h2> - -{{csssyntax}} - -<h2 id="例子">例子</h2> - - - -<p><font><font>以下片段取自我们的</font></font><a href="https://github.com/mdn/web-components-examples/tree/master/host-selectors"><font><font>宿主选择器示例</font></font></a><font><font>(</font></font><a href="https://mdn.github.io/web-components-examples/host-selectors/"><font><font>也可以观看在线演示</font></font></a><font><font>)。</font></font></p> - -<p><font><font>在这个例子中,有一个简单的自定义元素 </font></font><code><context-span></code><font><font> 可以用它包裹文本:</font></font></p> - -<pre class="brush: html"><h1>Host selectors <a href="#"><context-span>example</context-span></a></h1></pre> - -<p><font><font>在元素的构造函数中,创建</font></font><code>style</code><font><font>和</font></font><code>span</code><font><font>元素,填充</font></font><code>span</code><font><font>自定义元素的内容,并</font></font><code>style</code><font><font>使用一些 CSS 规则</font><font>填充</font><font>元素:</font></font></p> - -<pre class="brush: js">let style = document.createElement('style'); -let span = document.createElement('span'); -span.textContent = this.textContent; - -const shadowRoot = this.attachShadow({mode: 'open'}); -shadowRoot.appendChild(style); -shadowRoot.appendChild(span); - -style.textContent = 'span:hover { text-decoration: underline; }' + - ':host-context(h1) { font-style: italic; }' + - ':host-context(h1):after { content: " - no links in headers!" }' + - ':host-context(article, aside) { color: gray; }' + - ':host(.footer) { color : red; }' + - ':host { background: rgba(0,0,0,0.1); padding: 2px 5px; }';</pre> - -<p><code>:host(.footer) { color : red; }</code><font><font> 规则为文档</font><font>中所有在其上设置了 </font></font><code>footer</code><font><font> 类的</font></font><code><context-span></code><font><font> 元素实例(此实例中的影子宿主)</font><font>设置</font><font>样式</font><font>——使用它来为</font></font> {{htmlelement("footer")}} <font><font>中的元素提供实例一种特殊的颜色。</font></font></p> - -<h2 id="产品规格"><font><font>产品规格</font></font></h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{ SpecName('CSS Scope', '#host-selector', ':host()') }}</td> - <td>{{ Spec2('CSS Scope') }}</td> - <td>Initial definition.</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">浏览器兼容性</h2> - -<p>{{Compat("css.selectors.hostfunction")}}</p> - -<h2 id="也可以看看">也可以看看</h2> - -<ul> - <li><a href="/en-US/docs/Web/Web_Components">Web components</a></li> - <li>{{cssxref(":host-context()")}}</li> - <li>{{cssxref(":host")}}</li> -</ul> |
