:hover:not-(:has(:hover))
has()
CSS 4 引入的“父選擇器”，意思是：匹配那些里面包含某個子元素/狀態的元素。
例如：:has(:hover) 表示「自身包含正在被 hover 的子元素」。
:not()
取反偽類，表示不匹配里面的條件。
比如我們有一個按鈕，里面有個圖標。我們想讓鼠標移到按鈕本身時按鈕變色，但如果鼠標移到圖標（子元素），按鈕不要觸發 hover 效果。
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>示例</title><style>.btn {display: inline-flex;align-items: center;gap: 8px;padding: 10px 20px;border: 2px solid #333;border-radius: 8px;cursor: pointer;transition: background 0.3s;}/* 只有 hover 在按鈕本身時才生效，子元素 hover 不會觸發 */.btn:hover:not(:has(:hover)) {background: lightblue;}.btn span {padding: 2px 6px;background: #ccc;border-radius: 4px;}.btn span:hover {background: orange;}</style>
</head>
<body><div class="btn">按鈕<span>圖標</span></div>
</body>
</html>
詳解)
)
)
