css穿透属性有哪些？

CSS穿透属性主要用于处理样式优先级，特别是解决嵌套组件样式冲突的问题。常用的CSS穿透属性/方法有以下几种：

1. ::deep 穿透 (Shadow DOM 穿透):

   • 主要用于穿透 Shadow DOM 的样式封装，访问和修改 Shadow DOM 内部元素的样式。
   • 使用方式：host::deep(selector) { styles }
   • 注意：::deep 已被弃用，推荐使用 :part() 和 :slotted()。

2. :part() (Shadow DOM 穿透 - 推荐):

   • 用于样式化 Shadow DOM 中暴露出来的部分。需要在 Shadow DOM 的组件中使用 part 属性暴露元素。
   • 使用方式：host::part(part-name) { styles }
   • 示例：

     <my-component>
       <div part="my-element">Styled Element</div>
     </my-component>
     

     my-component::part(my-element) {
       color: red;
     }
     

3. :slotted() (Shadow DOM 穿透 - 推荐):

   • 用于样式化从外部插入到 Shadow DOM 中 slot 的元素。
   • 使用方式：host::slotted(selector) { styles }
   • 示例：

     <my-component>
       <span slot="my-slot">Slotted Content</span>
     </my-component>
     

     my-component::slotted(span) {
       font-weight: bold;
     }
     

4. !important (全局穿透 - 慎用):

   • 用于强制应用某个样式，优先级最高。
   • 使用方式：property: value !important;
   • 虽然可以穿透，但过度使用会使样式难以维护，应谨慎使用，尽量避免。

5. 特异性更高的选择器 (Specificity):

   • 通过更具体的选择器来覆盖原有样式。例如，使用类选择器 .class 比元素选择器 div 优先级更高，使用 ID 选择器 #id 比类选择器优先级更高。
   • 结合后代选择器、子选择器等可以提高特异性。
   • 这是比较推荐的穿透方式，因为它更符合 CSS 的层叠机制，更容易维护。

总结:

• 对于 Shadow DOM，推荐使用 :part() 和 :slotted()。
• 避免过度使用 !important。
• 优先考虑提高选择器特异性。

希望以上信息对您有所帮助！