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

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

密钥概念：

• :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规范有望提高功能，允许在

>中进行逗号分隔的论点

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

突出显示页面片段：

>片段标识符（例如，

，

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

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

.comment:target {
  background: #ffeb3b;
  border-color: #ffc107;
}

创建仅CSS-仅选项卡：

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

.comment:target {
  background: #ffeb3b;
  border-color: #ffc107;
}

<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>

>

可访问性提示：

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

在动作中： :not()

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

class。 :not() label-radio

[id^=tab] { position: absolute; }
[id^=tab]:first-child { z-index: 1; }
[id^=tab]:target { z-index: 2; }

链接在排除多种元素类型时至关重要，如下所示：

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

无线电，复选框和范围。

label:not(.label-radio) {
  font-weight: bold;
  display: block;
}

。

> faqs on选择器：

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

>

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