最近，CSS 的工作組 CSSWG 發布了一份新規定。這份新規定包含了一些非常有幫助的更新，讓我們來看看這些更新的具體內容吧。

目標選擇器

首先，CSSWG 在這份新規定中引入了目標選擇器。目標選擇器的意思是，當用戶點擊一個鏈接時，CSS 可以通過目標選擇器為頁面上的元素添加樣式。

/* HTML代碼 */
<div class="box" id="box1">
<a href="#box1">點擊我</a>
</div>
/* CSS代碼 */
.box:target {
background-color: #F00;
}

在上面的例子中，用戶點擊鏈接 <a href="#box1">點擊我</a> 后，元素 <div class="box" id="box1"> 的背景色變為紅色。

屬性選擇器的邏輯運算符

其次，CSSWG 還添加了屬性選擇器的邏輯運算符。邏輯運算符可以幫助選取同時滿足多個屬性條件的元素。

/* HTML代碼 */
<div class="square" id="square1" data-status="open"></div>
<div class="square" id="square2" data-status="closed"></div>
/* CSS代碼 */
.square[data-status="open"][id="square1"] {
background-color: #F00;
}

在上面的例子中，我們使用邏輯運算符同時選取了 data-status 等于 open 且 id 等于 square1 的元素，為該元素添加了背景色。

:not 偽類的升級版

最后，CSSWG 還升級了 :not 偽類。升級后的 :not 偽類除了可以使用簡單選擇器外，還可以使用復雜選擇器。

/* HTML代碼 */
<div class="square" id="square1">
<div class="circle" id="circle1"></div>
</div>
<div class="square" id="square2">
<p class="text">這是一段文字</p>
</div>
/* CSS代碼 */
.square:not(#square1 .circle),
.square:not(#square2 p) {
background-color: #F00;
}

在上面的例子中，我們使用復雜選擇器為元素添加了樣式。第一個 :not 只會選取 id 不等于 square1 且不是 .circle 類型的元素，第二個 :not 只會選取 id 不等于 square2 且不是 <p> 標簽的元素。這兩個選擇器為不同的元素添加了紅色背景色。

總之，這份新規定為我們帶來了更多選擇器的使用方法，幫助我們更輕松地為元素添加樣式。