首页 >web前端 >css教程 >CSS伪级：：非（）和：目标

CSS伪级：：非（）和：目标

Christopher Nolan原创: 2025-02-19 11:29:08904浏览

本文探讨了多功能CSS伪级:not()和:target，展示了它们在创建精致和有针对性的样式方面的力量。我们将深入研究他们的功能并展示实用的应用，包括构建无JavaScript的标签。

CSS Pseudo-classes: :not() and :target

密钥概念：

:not()伪级充当过滤器，选择所有元素>
:target#伪级突出显示了对应于特定URL片段的文档部分（符号之后的部分）。这使得创建没有JavaScript的交互元素。

> javascript-无:target：

:target>通过巧妙地操纵URL片段和:target pseudo-class，我们可以在不依赖JavaScript的情况下构建功能性选项卡式接口。单击选项卡会更新URL片段，并在相应的选项卡内容上触发

样式，使其成为可见层。

:not()>不包括>的元素：

> :not()input:not([type=radio]):not([type=checkbox]):not([type=range])的权力在于它可以将元素排除在样式规则之外的能力。但是，其目前仅接受一个参数的局限性需要链接多个排除。例如，:not()选择除了无线电按钮，复选框和范围输入之外的所有输入元素。未来的CSS规范有望提高功能，允许在

>中进行逗号分隔的论点

CSS Pseudo-classes: :not() and :target

>摘自蒂法尼·布朗（Tiffany B. Brown）的“ CSS Master”。在书店和电子书中可用。 >本节探讨了高级伪级，包括儿童指数和键入子女指数的伪级（通过文档树中的位置选择元素）和输入伪级（基于其值和状态的形式字段）。

突出显示页面片段：

>片段标识符（例如，

，

）用于页面内导航。 #toppseudo-class使我们可以在没有JavaScript的当前片段标识符的截面上进行样式的样式。例如：#footnote1 :target

当ID与URL片段匹配时，这种样式的评论。

<code class="language-css">.comment:target {
  background: #ffeb3b;
  border-color: #ffc107;
}</code>

CSS Pseudo-classes: :not() and :target

创建仅CSS-仅选项卡：

伪级是创建无JavaScript无标签的关键。通过基于:target状态的设置z-index>值，我们确保只能看到选定的选项卡。 :target

<code class="language-css">.comment:target {
  background: #ffeb3b;
  border-color: #ffc107;
}</code>

<code class="language-html"><div class="tabbed-widget">
  <div class="tab-wrap">
    <a href="https://www.php.cn/link/7426f79c9a7f5af0a6cc457b2a7fb195">Tab 1</a>
    <a href="https://www.php.cn/link/60430f4a984aa0a534e027339a7580a7">Tab 2</a>
    <a href="https://www.php.cn/link/9d4f684ba088d28ad1c2ae7d0aee496a">Tab 3</a>
  </div>
  <ul class="tab-body">
    <li id="tab1"><p>This is tab 1.</p></li>
    <li id="tab2"><p>This is tab 2.</p></li>
    <li id="tab3"><p>This is tab 3.</p></li>
  </ul>
</div></code>

CSS Pseudo-classes: :not() and :target >

可访问性提示：

为了获得更好的可访问性，请考虑使用JavaScript管理属性。 aria-hidden

在动作中： :not()

伪级是通过样式标签来证明的，不包括

class。 :not() label-radio

<code class="language-css">[id^=tab] { position: absolute; }
[id^=tab]:first-child { z-index: 1; }
[id^=tab]:target { z-index: 2; }</code>

链接 CSS Pseudo-classes: :not() and :target 在排除多种元素类型时至关重要，如下所示：

这个有效地针对所有输入类型:not()

无线电，复选框和范围。

<code class="language-css">label:not(.label-radio) {
  font-weight: bold;
  display: block;
}</code>

。

> faqs on选择器：

> :not()本节提供了有关选择器的常见问题的答案，涵盖了其功能，浏览器支持以及对各种CSS选择器的用法。答案与原始文本中的答案相似，但为了清晰和简洁而改写。

以上是CSS伪级：：非（）和：目标的详细内容。更多信息请关注PHP中文网其他相关文章！

JavaScript css less for checkbox Filter using class symbol this promise position background input

声明：

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

上一篇：CSS Pseudo-classes: Styling Elements Based on Their Index下一篇：How Open Sourcing Bootstrap Made It Huge

查看更多