给HTML元素设置样式的核心是CSS，主要通过行内样式、内部样式表和外部样式表三种方式实现，其中外部样式表因内容与表现分离、便于维护和复用而最为推荐；针对自定义元素（Web Components）的渲染问题，:defined伪类能确保样式仅在元素被浏览器成功定义并升级后才应用，避免FOUC（无样式内容闪烁）或渲染异常，如示例中my-loading-card:not(:defined)提供加载占位样式，而my-loading-card:defined在元素就绪后应用最终样式；当样式冲突时，CSS优先级（Specificity）和继承机制起决定作用，行内样式优先级最高，其次是ID选择器、类选择器、元素选择器等，且后续规则可覆盖前序低优先级规则，合理运用选择器权重和样式层级可有效管理样式冲突，提升代码可维护性。

给HTML元素穿衣戴帽，这事儿说起来简单，无非就是用CSS。但真要做到得体、高效，尤其是当你开始玩转自定义元素（Web Components）的时候，里面门道可就多了。至于那个听起来有点神秘的

:defined

解决方案

给HTML元素设置样式，核心就是CSS。方法大体上分三种，各有各的用武之地，就像给不同场合选衣服：

1. 行内样式 (Inline Styles)： 直接写在HTML标签的

   style

   属性里。

   这是一段蓝色文字。

   这种方式，优先级最高，但写多了HTML会变得非常臃肿，难以维护。我个人基本只在快速测试或者少数需要动态注入的场景下用它，就像偶尔应急穿个一次性雨衣，方便是方便，但不是长久之计。

   立即学习“前端免费学习笔记（深入）”；

2. 内部样式表 (Internal Stylesheet)： 把CSS规则写在HTML文档

   标签里的

   
   
   
     
   页面标题
     
   这段文字会被高亮。
   

   适用于单个页面的样式，方便查看和修改，但如果多个页面用同一套样式，就得复制粘贴，效率不高。有点像只为一间屋子设计家具，别的屋子还得另搞一套。

3. 外部样式表 (External Stylesheet)： 这是最推荐的方式。把CSS规则写在一个单独的

   .css

   文件里，然后通过
   标签在HTML文档中引用。

   styles.css

   文件内容：

   body {
     font-family: Arial, sans-serif;
     line-height: 1.6;
   }
   nav a {
     text-decoration: none;
     color: #333;
   }

   HTML文件：

   
     
   
   
     
     
   一些内容。
   
   							
   
   								
   								
   
   									Picsart
   									
   Picsart是全球最大的数字创作平台。
   								
   								下载 
   							
   						
   

   这种方式让内容和样式彻底分离，维护起来最方便，团队协作也更顺畅。就像有了统一的服装规范，大家都能按章办事，不用每次都从头设计。

除了这三种方式，真正给元素“定义”样式，还得靠各种CSS选择器（元素选择器、类选择器、ID选择器、属性选择器、伪类、伪元素等等），它们决定了你写的样式会作用在哪些具体的HTML元素上。理解这些，才算真正掌握了样式定义的精髓。

自定义元素样式：

:defined

伪类如何确保正确渲染？

说起自定义元素（Web Components），它们就像是你自己造的积木块，一开始浏览器并不认识它们。比如你定义了一个

my-button { display: block; }

这就是

:defined

customElements.define()

:defined

举个例子：

你看，

my-loading-card:not(:defined)

my-loading-card:defined

CSS选择器优先级与继承：如何有效管理HTML元素样式冲突？

在给HTML元素设置样式时，经常会遇到一个头疼的问题：为什么我写的样式没生效？或者，为什么它生效了，但不是我想要的那种效果？这八成是CSS的优先级（Specificity）和继承（Inheritance）在作祟。理解这两点，是写出可预测、可维护CSS的关键。

优先级 CSS的优先级决定了当多个规则作用于同一个元素时，哪条规则会最终生效。它不是简单的“后写的生效”，而是一套复杂的计算机制。大致的权重顺序是：

• 行内样式 (

  style

  属性)： 权重最高，就像是直接给元素下了“圣旨”，