CSS 选择器：解锁现代网页设计的高级选择器

大家好！欢迎来到我的博客。 ？

介绍

今天，我们将深入了解高级 CSS 选择器的世界。这些选择器，如 :is()、:where()、:not() 和 :has()，由于其特殊性规则或浏览器支持问题，一开始可能看起来有点棘手，但它们是超级强大的工具创建更高效​​、更动态的 CSS。让我们一起探索这些选择器，了解它们的工作原理，查看它们的实际效果，并讨论一些其他的细微差别。

您将在本文中学到什么

• 理解每个选择器：分解 :is()、:where()、:not() 和 :has()。

• 浏览器支持：了解哪些浏览器支持这些选择器。

• 特异性见解：这些选择器如何影响 CSS 规则应用。

• 实际示例：真实世界的用例，展示这些选择器如何简化您的 CSS。

• 最佳实践：有效使用这些选择器的提示。

？ :is() 选择器

什么是 :is() ？

:is() 伪类函数允许您将样式应用于多个选择器，而无需重复相同的属性。它对于对具有不同特异性的选择器进行分组特别有用。

示例：

<div>





<pre class="brush:php;toolbar:false">:is(.alert.success, .alert.error, .alert.warning) {
    font-weight: bold;
    border: 1px solid;
    border-radius: 4px;
}

.alert.success { border-color: green; }
.alert.error { border-color: red; }
.alert.warning { border-color: orange; }

结果：所有警报类型均采用粗体和边框，颜色由其特定类别定义。

？提示：您可以复制粘贴 Codepen 上的所有示例，以查看实际结果。

？ :where() 选择器

什么是 :where() ？

类似于 :is()、:where() 分组选择器，但它的特异性为 0，非常适合创建易于覆盖的样式。

示例：

<button>





<pre class="brush:php;toolbar:false">/* Button styles with low specificity */
:where(button, input[type="button"], input[type="submit"]) {
    font-size: 1rem;
    padding: 0.5em 1em;
    background-color: #f0f0f0;
    border: none;
    cursor: pointer;
}

/* Specific override for primary buttons */
button.primary {
    background-color: #007BFF;
    color: white;
}

结果：

？ :not() 选择器

什么是 :不是() ？

:not() 伪类用于从选择中排除某些元素。它非常适合将样式应用于除特定元素或类之外的所有内容。

示例：

• /* Style all list items except those marked as 'done' */
  li:not(.done) {
      background-color: #f0f0f0;
  }
  
  /* Darken the text for completed items */
  li.done {
      color: #888;
  }
  
  

  结果：

  

  ？ :has() 选择器

  什么是 :has() ？

  :has() 伪类允许您根据元素包含的内容设置元素的样式。这个选择器非常强大，但在撰写本文时浏览器支持有限。

  示例：
  

  <div>
  
  
  
  
  
  <pre class="brush:php;toolbar:false">:is(.alert.success, .alert.error, .alert.warning) {
      font-weight: bold;
      border: 1px solid;
      border-radius: 4px;
  }
  
  .alert.success { border-color: green; }
  .alert.error { border-color: red; }
  .alert.warning { border-color: orange; }
  
  

  <button>
  
  
  
  
  
  <pre class="brush:php;toolbar:false">/* Button styles with low specificity */
  :where(button, input[type="button"], input[type="submit"]) {
      font-size: 1rem;
      padding: 0.5em 1em;
      background-color: #f0f0f0;
      border: none;
      cursor: pointer;
  }
  
  /* Specific override for primary buttons */
  button.primary {
      background-color: #007BFF;
      color: white;
  }
  

  结果：

  

  浏览器支持

  • :is() 和 :where()：现代浏览器通常支持这些，但请始终检查最新的兼容性数据。
  • :not()：得到广泛支持，但 :not() 内部的复杂选择器可能无法在旧版浏览器中工作。
  • :has()：仅限于最新版本的 Safari，并在其他浏览器中提供实验性支持。谨慎使用或使用polyfills以获得更广泛的兼容性。

  具体考虑因素

  • :is() 和 :where() 从它们包含的选择器继承最高的特异性，而 :where() 本身的特异性为零。
  • :not() 的特殊性在于它包含的选择器。
  • :has() 可能会导致复杂的特异性问题，因为它取决于其中的选择器，但它不会直接添加到特异性分数。

  使用高级选择器的最佳实践

  • 用于 DRY CSS：这些选择器减少重复，使您的 CSS 更易于维护。
  • 考虑性能：复杂的选择器会影响性能，尤其是嵌套的选择器。
  • 旧版浏览器的后备：使用 :has() 时，确保您有后备或使用 @supports 的功能查询。
  • 避免过度使用：虽然功能强大，但不要使选择器过于复杂，因为可读性是关键。

  实际应用

  • 样式组件：使用 :is() 和 :where() 实现不同按钮类或表单元素之间的通用样式。

  • 动态布局 : :has() 可用于自适应布局，其中某些元素的存在会改变父元素的样式。

  • 响应式设计：将这些选择器与媒体查询相结合，以获得更加动态和上下文感知的设计。

  结论

  高级 CSS 选择器可以简化您的样式表，使其更干净、更高效。密切关注浏览器支持，尤其是 :has()，并明智地使用这些选择器来增强您的 CSS，而不牺牲可维护性。

  祝您编码愉快，祝您的 CSS 具有所需的选择性！ ？

  ---

  ？大家好，我是 Eleftheria，社区经理、 开发人员、公共演讲者和内容创建者。

  ？如果您喜欢这篇文章，请考虑分享。

  ？ 所有链接 | X | 领英