Geoff Graham

CSS 的 ::details-content 伪元素提供了一种方法来选择和应用样式到 <details> 元素的内部部分，而不会将样式泄漏到 <summary>。

details::details-content {
  background-color: hsl(0 0% 0%);
}

<element-selector::details-content {}

我们说……

在元素上声明 CSS 的 anchor-name 属性将其注册为一个“锚点”，我们可以使用它作为参考来定位其他元素。

.anchor {
  anchor-name: --my-anchor;
}

该属性是 CSS 锚点定位 的一部分……

CSS 的 view-timeline-name 属性允许我们识别和引用一个元素，当它进入滚动容器（也称为“源”）的可视区域（即视口）时，我们可以根据其滚动位置对其进行动画。

.element {
  view-timeline-name: 

CSS 的 view-transition-name 属性唯一标识一个可以在视图过渡中使用的元素。

card {
  view-transition-name: card-transition;
}

我们为元素指定一个名称（即 <custom-ident），我们可以引用它，或者将属性设置为 none 以……

CSS 的 container 属性是一个简写，它将 container-name 和 container-type 属性组合到一个声明中。

.parent {
  container: cards-grid / inline-size;

  /* Equivalent to: */
  container-name: cards-grid;
  container-type: inline-size;
}

container 属性是一个……

CSS 的 container-type 属性是容器查询功能的一部分，用于将元素注册为一个容器，当它满足某些条件时，可以将样式应用于其他元素。

.parent {
  container-type: inline-size;
}

@container (width < 500px) 

CSS 的 container-name 属性用于将元素注册为一个容器，该容器根据容器的大小和样式将样式应用于其他元素。

.parent {
  container-name: cards;
  container-type: inline-size;
}

@container cards (width 800px) {
  .child {
    

/* Case sensitive */
a[href*='css-tricks' s] {}

/* Case insensitive */
a[href*='css-tricks' i] {}

添加一个 s 使选择器区分大小写，而 i 使其不区分大小写。