CSS 選擇器：解鎖現代網頁設計的進階選擇器-css教學-PHP中文網

大家好！歡迎來到我的部落格。？

介紹

今天，我們將深入了解進階 CSS 選擇器的世界。這些選擇器，如:is()、:where()、:not() 和:has()，由於其特殊性規則或瀏覽器支援問題，一開始可能看起來有點棘手，但它們是超級強大的工具可建立更有效率、更動態的CSS。讓我們一起探索這些選擇器，了解它們的工作原理，查看它們的實際效果，並討論一些其他的細微差別。

您將在本文中學到什麼

理解每個選擇器：分解 :is()、:where()、:not() 和 :has()。
瀏覽器支援：了解哪些瀏覽器支援這些選擇器。
特異性見解：這些選擇器如何影響 CSS 規則應用。
實際範例：真實世界的用例，展示這些選擇器如何簡化您的 CSS。
最佳實務：有效使用這些選擇器的提示。

？ :is() 選擇器

什麼是 :is() ？

:is() 偽類函數可讓您將樣式套用於多個選擇器，而無需重複相同的屬性。它對於對具有不同特異性的選擇器進行分組特別有用。

範例：

<div>





<pre class="brush:php;toolbar:false">:is(.alert.success, .alert.error, .alert.warning) {
    font-weight: bold;
    border: 1px solid;
    border-radius: 4px;
}

.alert.success { border-color: green; }
.alert.error { border-color: red; }
.alert.warning { border-color: orange; }

登入後複製

結果：所有警報類型均採用粗體和邊框，顏色由其特定類別定義。

CSS Selectors: Unlocking Advanced Selectors for Modern Web Design

？提示：您可以複製貼上 Codepen 上的所有範例，以查看實際結果。

？ :where() 選擇器

什麼是 :where() ？

類似於 :is()、:where() 分組選擇器，但它的特異性為 0，非常適合創建易於覆蓋的樣式。

範例：

<button>





<pre class="brush:php;toolbar:false">/* Button styles with low specificity */
:where(button, input[type="button"], input[type="submit"]) {
    font-size: 1rem;
    padding: 0.5em 1em;
    background-color: #f0f0f0;
    border: none;
    cursor: pointer;
}

/* Specific override for primary buttons */
button.primary {
    background-color: #007BFF;
    color: white;
}

登入後複製

結果：

CSS Selectors: Unlocking Advanced Selectors for Modern Web Design

？ :not() 選擇器

什麼是 :不是() ？

:not() 偽類用於從選擇中排除某些元素。它非常適合將樣式應用於除特定元素或類別之外的所有內容。

範例：

<ul>
    <li>





<pre class="brush:php;toolbar:false">/* Style all list items except those marked as 'done' */
li:not(.done) {
    background-color: #f0f0f0;
}

/* Darken the text for completed items */
li.done {
    color: #888;
}

登入後複製

結果：

CSS Selectors: Unlocking Advanced Selectors for Modern Web Design

？ :has() 選擇器

什麼是 :has() ？

:has() 偽類別可讓您根據元素包含的內容設定元素的樣式。這個選擇器非常強大，但在撰寫本文時瀏覽器支援有限。

範例：

<div>





<pre class="brush:php;toolbar:false">:is(.alert.success, .alert.error, .alert.warning) {
    font-weight: bold;
    border: 1px solid;
    border-radius: 4px;
}

.alert.success { border-color: green; }
.alert.error { border-color: red; }
.alert.warning { border-color: orange; }

登入後複製

<button>





<pre class="brush:php;toolbar:false">/* Button styles with low specificity */
:where(button, input[type="button"], input[type="submit"]) {
    font-size: 1rem;
    padding: 0.5em 1em;
    background-color: #f0f0f0;
    border: none;
    cursor: pointer;
}

/* Specific override for primary buttons */
button.primary {
    background-color: #007BFF;
    color: white;
}

登入後複製

結果：

CSS Selectors: Unlocking Advanced Selectors for Modern Web Design