CSS(Cascading Style Sheets) 是一種用于描述網頁外觀的語言。選擇器是 CSS 中最基礎的部分之一,既可以選中文本或元素,也可以通過屬性選擇器對元素進行更精細的控制。最新的選擇器可以讓我們更加精確地選擇元素,使得定制化樣式更加容易。
/* 屬性選擇器 */ input[type="text"] { background-color: #F2F2F2; border: none; padding: 10px; } /* 偽類選擇器 */ a:hover { color: blue; } /* :not 選擇器 */ ul:not(.clearfix) { margin: 0; padding: 0; } /* :empty 選擇器 */ p:empty { display: none; } /* 表單相關選擇器 */ input:enabled { background-color: white; } input:disabled { background-color: #F2F2F2; } input:checked + label { color: red; } /* :where 和 :is 選擇器 */ :where(h1, h2, h3) { font-size: 24px; } :is(button, input[type="submit"]) { background-color: blue; color: white; }
如上所示,我們通過屬性選擇器可以根據不同屬性對元素進行選擇;通過偽類選擇器可以在鼠標滑過、元素獲得焦點等情況下根據需要來定制化樣式。
:not 選擇器可以幫助我們選擇不符合某些條件的元素,而 :empty 選擇器則可以選擇沒有任何內容的元素。
表單相關選擇器可以讓我們對表單元素進行更為精細的控制,比如可以根據元素是否可用來設置背景色等。
最新的選擇器還包括了 :where 和 :is 選擇器,它們可以通過組合選擇器來完成更加精細的樣式定制。通過這些最新的選擇器,我們可以更加高效地進行樣式控制,讓我們的網頁變得更加美觀和易于使用。
下一篇css最大行高