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中文網其他相關文章！