以下是 2024 年的五个现代 CSS 功能，以及每个功能的示例代码：

1. :has() 选择器：
   • 这允许您根据子元素设置父元素的样式。

如果父级 div 包含 .active 子级，则设置其样式

div:has(.active) {
       background-color: lightgreen;
   }

1. 容器查询：
   • 这些可以根据容器的大小进行响应式设计。

根据容器大小更改卡片的布局

   @container (min-width: 500px) {
       .card {
           display: flex;
           flex-direction: row;
       }
   }

   @container (max-width: 499px) {
       .card {
           display: block;
       }
   }

1. 嵌套选择器：
   • CSS 现在支持嵌套规则以实现更清晰的代码。

卡片内按钮的嵌套样式

   .card {
       background-color: white;
       padding: 20px;

       .button {
           background-color: blue;
           color: white;
           padding: 10px;
       }
   }

1. text-wrap 属性： 此属性有助于跨行均匀分布文本。

使用文本换行来平衡段落中的文本

   p {
       text-wrap: balance;
       width: 300px; / Set a width for the effect /
   }

1. ：焦点可见伪类：
   • 这通过键盘导航集中的样式元素提高了可访问性。

通过键盘聚焦时突出显示输入字段

   input:focus-visible {
       outline: 2px solid blue;
       background-color: lightyellow;
   }

这些示例说明了如何在 CSS 中实现每个功能，从而增强网页设计的响应能力和可访问性。