CSS現(xiàn)在可以通過:has()偽類實現(xiàn)根據(jù)子元素反向選擇父元素。1. 語法為parent:has(child)，例如div:has(img)可對包含圖片的div添加邊框；2. 支持鏈?zhǔn)綏l件如section:has(h1, .highlight)；3. 常見用途包括根據(jù)視頻、側(cè)邊欄組件等調(diào)整布局；4. 當(dāng)前支持Chrome 105 、Safari 15.4 、Edge 106 ，F(xiàn)irefox暫不支持需提供后備方案；5. 使用時建議保持條件簡潔以避免性能問題。

Yes, CSS can finally target parent elements based on their children — and it’s all thanks to the :has() pseudo-class. This selector lets you style a parent element if it contains a specific child or match a certain condition. It’s a game-changer because for years, we’ve only been able to go from parent to child, never the other way around.

Now that major browsers like Chrome and Safari support :has(), it's time to see how it works in real use cases.

How to Use :has() to Style Parent Elements

The basic syntax looks like this:

parent:has(child) {
  /* styles here */
}

For example, if you want to add a border to a <div> that contains an <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/175164761778650.jpeg" class="lazy" alt="關(guān)于：has（）父級選擇器的實用CSS教程" >, you'd write:

div:has(img) {
  border: 2px solid #333;
}

This means any div with an image inside will get that border. You're not styling the image — you're styling its container, which was tricky before without JavaScript.

You can also chain multiple selectors inside :has():

section:has(h1, .highlight) {
  background-color: #f0f0f0;
}

This section gets a light gray background if it has either an h1 or an element with the class .highlight.

Common Use Cases for :has() in Real Projects

Here are some situations where :has() really shines:

• Styling article containers differently when they include videos

  .article:has(video) {
  padding: 0;
  }

• Adjusting layout if a sidebar contains a specific widget

  .sidebar:has(.newsletter-signup) {
  background-color: #fff8e7;
  }

• Adding icons next to links that open in new tabs
  You can target anchor tags with a [target="_blank"] attribute:

  a[target="_blank"]:has(svg) {
  padding-right: 10px;
  }

These examples show how :has() helps reduce extra classes or JavaScript just to apply conditional styling based on content.

Browser Support and Fallbacks

Right now, :has() works in:

• Chrome 105
• Safari 15.4
• Edge 106

But it’s not yet supported in Firefox (as of early 2025), so you need to plan accordingly.

If you're building a production site, consider these options:

• Use :has() but provide a fallback style that doesn’t rely on it

• Detect browser support with @supports:

  @supports selector(:has(*)) {
  /* styles using :has() */
  }

• For unsupported browsers, fall back to adding a class via JavaScript:

  document.querySelectorAll('div').forEach(div => {
  if (div.querySelector('img')) {
    div.classList.add('has-img');
  }
  });

Keep in mind that even though :has() is powerful, it's still somewhat experimental. So test carefully across browsers.

Final Notes on Using :has() Effectively

It might be tempting to overuse :has(), especially since it opens up new possibilities. But keep your selectors simple and avoid deeply nested conditions. For example:

.container:has(.active):has(.highlight):has(ul)

That’s valid, but hard to read and debug.

Stick to one or two conditions at most. Also, remember that :has() can slow things down a bit because the browser has to look inside elements to check for matches.

So while it's exciting and useful, treat it like any performance-sensitive feature — use it wisely.

基本上就這些。

以上是關(guān)于：has（）父級選擇器的實用CSS教程的詳細(xì)內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！