1. :is()
mdn: CSS 偽類函數(shù)以選擇器列表作為參數(shù)谆焊，并選擇該列表中任意一個選擇器可以選擇的元素蹲坷。這對于以更緊湊的形式編寫大型選擇器非常有用
備注： 最初該選擇器被命名為 :matches()（以及 :any()），但在 CSSWG issue #3258 中被重命名為 :is()
選中header main footer中的所有段落并綁定hover狀態(tài):
header p:hover,
main p:hover,
footer p:hover {
color: red;
}
使用 :is() 可以簡化成以下寫法：
:is(header, main, footer) p:hover {
color: red;
}
2. :where()
mdn: CSS 偽類函數(shù)接受選擇器列表作為它的參數(shù)塞祈，將會選擇所有能被該選擇器列表中任何一條規(guī)則選中的元素
用法：
選中header main footer中的所有段落并綁定hover狀態(tài):
header p:hover,
main p:hover,
footer p:hover {
color: red;
}
使用 :where() 可以簡化成以下寫法:
:where(header, main, footer) p:hover {
color: red;
}
是不是感覺:is()和:where()的用法一模一樣金刁？
:is()和:where()的用法和作用是很相似的，唯一不同的在于议薪，:where() 的優(yōu)先級總是為 0尤蛮，但是 :is() 的優(yōu)先級是由它的選擇器列表中優(yōu)先級最高的選擇器決定的
3. :not()
:not()CSS偽類用來匹配不符合一組選擇器的元素。由于它的作用是防止特定的元素被選中斯议，它也被稱為反選偽類（negation pseudo-class）**
用法：
<p>我是一個段落产捞。</p>
<p class="fancy">我非常非常喜歡！</p>
<div>我不是一個段落哼御。</div>
<h2>
<span class="foo">foo 在 h2 里面</span>
<span class="bar">bar 在 h2 里面</span>
</h2>
.fancy {
text-shadow: 2px 2px 3px gold;
}
/* 類名不是 `.fancy` 的 <p> 元素*/
p:not(.fancy) {
color: green;
}
/* 非 <p> 元素 */
body :not(p) {
text-decoration: underline;
}
/* 既不是 <div> 也不是 <span> 的元素 */
body :not(div):not(span) {
font-weight: bold;
}
/* 不是 <div> 或 `.fancy` 的元素*/
body :not(div, .fancy) {
text-decoration: overline underline;
}
/* <h2> 元素中不是有 `.foo` 類名的 <span> 元素 */
h2 :not(span.foo) {
color: red;
}
4. :only-child
:only-childCSS 偽類表示沒有任何兄弟元素的元素坯临。這與:first-child焊唬、:last-child或:nth-child(1)、:nth-last-child(1)相同看靠，但前者具有更小的權(quán)重性赶促。
用法
<ol>
<li>今天天氣晴朗，是個敲代碼的好日子</li>
</ol>
<ol>
<li>今天天氣晴朗挟炬，是個敲代碼的好日子</li>
<li>但是寫了很多bug.</li>
<li>這很讓我頭疼.</li>
</ol>
li:only-child {
color: fuchsia;
}
b:only-child {
text-decoration: underline;
}
5. :root
:root這個 CSS 偽類匹配文檔樹的根元素鸥滨。對于 HTML 來說，:root表示<html>元素谤祖，除了優(yōu)先級更高之外婿滓，與html選擇器相同。
用法:
你可以使用:root選擇器定義一個變量--main-bg-color粥喜，并在任意一個選擇器中使用var來調(diào)用--main-bg-color
:root {
--main-bg-color: lightgreen;
}
.main {
background: var(--main-bg-color);
}
6. :empty
:emptyCSS偽類用于選擇不包含任何子元素的元素凸主。子元素可以是元素節(jié)點或文本（包括空格）。但是注釋容客、處理指令和 CSScontent不會影響元素是否被認定為空。
用法：
<p>下面的節(jié)點沒有內(nèi)容</p>
<div></div>
<p>下面的節(jié)點有空的標簽</p>
<div>
<p>123456</p>
</div>
<p>下面的節(jié)點有注釋</p>
<div><!-- 這里是注釋 --></div>
<p>下面的節(jié)點有空格</p>
<div> </div>
<p>下面的節(jié)點有空的標簽</p>
<div>
<p></p>
</div>
div:empty {
outline: 2px solid deeppink;
height: 1em;
width: 100px;
}
7. :invalid
:invalid是 CSS偽類選擇器约郁，用來選擇任何未通過驗證的<form>缩挑、<fieldset>、<input>或其他表單元素鬓梅。
<form>
<label for="form-name">姓名</label>
<input type="text" name="name" id="form-name" required />
<button type="submit">提交</button>
</form>
form:invalid > button {
opacity: 0.3;
pointer-events: none;
}
填入內(nèi)容前/后的效果對比：
本文由mdnice多平臺發(fā)布
