css的几个有用属性:

1.css content 属性:
content 属性通常只对伪元素（如 ::before 或 ::after）生效，而不是直接作用于 HTML 元素本身。在您的情况下，您试图直接修改一个 div 元素的内容，这是不会生效的。
  
错误用法:
:deep(.select-none){
    content: 'No results match your search.';
}
  
正确用法:
:deep(.select-none){
    font-size: 0;// 元素的字体大小设置为 0, 实际效果是隐藏了元素的原始文本内容，因为文字大小为 0 就不可见了, 但是，元素本身及其尺寸和其他样式属性仍然保持不变.
    &:before{
      font-size: 1rem; // 这样做是为了确保新的文本内容是可见的，因为父元素的字体大小是 0.
      content: 'No results match your search.'; // 设置伪元素的内容为指定的文本, 这个文本将会显示在元素中，替代原来的内容.
    }
}
  
2.css fit-content使用:
这个属性很有用,如下代码:
<div class="flex w-full flex-col gap-2.5">
<div
  v-for="(item, index) in selectedItems"
  :key="index"
  class="flex items-center rounded border border-color-info bg-brand-subtler hover:border-color-success w-fit"
>
  <MText class="flex-1">
    {{ item.label }}
  </MText>
  <MIcon
    name="close"
    size="sm"
    class="cursor-pointer hover:rounded hover:bg-brand-subtle"
    @click="removeItem(item.value)"
  />
</div>
</div>
  
这个实现的是: 父级 100%宽度，但是子元素会根据子级内容的宽度自动伸缩，包括自动换行
https://developer.mozilla.org/zh-CN/docs/Web/CSS/fit-content
  
下面这个:
<div class="flex w-full flex-col gap-2.5">
<div
  v-for="(item, index) in selectedItems"
  :key="index"
  class="flex items-center justify-between rounded border border-color-info bg-brand-subtler hover:border-color-success"
>
  <MText class="flex-1">
    {{ item.label }}
  </MText>
  <MIcon
    name="close"
    size="sm"
    class="cursor-pointer hover:rounded hover:bg-brand-subtle"
    @click="removeItem(item.value)"
  />
</div>
</div>
  
实现的是，父级 100%宽度，但是子元素会占据除去MICon元素，剩余的所有宽度，同时可以自动换行
  
3.flex-wrap是用于flex容器的,而不是子元素
  
4.css对子元素设置flex属性:
可以使用一个，两个或三个值来指定 flex 属性

单值语法：值必须是以下之一：
一个 <flex-grow> 的有效值：此时简写会扩展为 flex: <flex-grow> 1 0。
一个 <flex-basis> 的有效值：此时简写会扩展为 flex: 1 1 <flex-basis>。
关键字 none 或者全局关键字之一。 // 注意 flex: none 对应， flex-grow: 0; flex-shrink: 0; flex-basis: auto;
  
如:
/* 单值，无单位数字：flex-grow
flex-basis 此时等于 0。 */
flex: 2; // 即为: flex: 2 1 0

/* 单值，宽度/高度：flex-basis */
flex: 10em;
flex: 30px; // 即为: flex: 1 1 30px;
flex: min-content;
  
双值语法：
第一个值必须是一个 flex-grow 的有效值。
第二个值必须是以下之一：
一个 flex-shrink 的有效值：此时简写会扩展为 flex: <flex-grow> <flex-shrink> 0。
一个 flex-basis 的有效值：此时简写会扩展为 flex: <flex-grow> 1 <flex-basis>。
  
三值语法：值必须按照以下顺序指定：
一个 flex-grow 的有效值。
一个 flex-shrink 的有效值。
一个 flex-basis 的有效值。