kankan上面的代码，是不是感觉逻辑非常顺畅？这就是语义化带来的美感。

HTML搭建了骨架，CSS则负责赋予其血肉。但在实际开发中，我们经常会遇到多个CSS规则同时作用于同一个元素的情况。这时候，谁说了算？这就涉及到了CSS优先级的问题。

hen多新手开发者可Neng会觉得CSS优先级是个玄学，明明写了样式却不生效，Zui后不得不祭出!important大法。其实CSS有一套非常严谨的计算逻辑。

我们Ke以把CSS选择器kan作是拥有不同“军衔”的士兵：

ID选择器如同将军，权重极高。

类选择器、属性选择器、伪类如同校官，权重中等。

标签选择器、伪元素如同士兵，权重较低。

通配符、结合符几乎没有权重。

/* ID选择器：权重100 */
#unique-content { 
  color: pink; 
}
/* 类选择器：权重10 */
.highlight { 
  color: green; 
}
/* 标签选择器 + !important：无视规则，直接碾压 */
p { 
  color: blue !important; 
}

在上述例子中，即便p标签的权重Zui低，但因为加上了!important，它依然Neng强行覆盖ID和类选择器的样式。不过这里要郑重提醒：!important是核武器，用多了会破坏样式的可维护性，除非万不得Yi，尽量别碰。

聊完了各自的特点，我们终于回到了今天的主题：HTML语义化与CSS优先级是如何协同工作的？这不仅仅是“结构+样式”那么简单，它们在响应式设计和SEO优化中有着深层次的默契。

在移动端开发中，我们经常面临一个两难的抉择：从SEO角度kan，我们希望

.container {
  display: flex;
}
/* 在桌面端，让左侧边栏视觉上排在前面 */
.aside-left {
  order: -1; 
}
@media  {
  .container {
    flex-direction: column;
  }
  /* 在移动端，调整顺序，让侧边栏跑到主内容后面 */
  .aside-left {
    order: 2;
  }
  main {
    order: 1;
  }
}