Qt界面美化全解析：QSS样式表从入门到精通

Qt界面美化全解析：QSS样式表从入门到精通面试官：Qt界面怎么美化？你：QSS。面试官：QSS和CSS什么区别？setStyleSheet有什么坑？你：……前言很多做C++桌面开发的同事，Qt界面一用就是多年"教材配色"：灰色按钮、系统味十足的滚动条。产品甩来一套视觉稿要求改头换面，第一反应往往是翻QStyle源码搞自绘。其实九成的视觉需求，Qt Style Sheet（QSS）就能搞定。它借了CSS的选择器语法和盒模型，但不是CSS的子集——有自己的polish机制，也有埋不完的坑。这篇从选择器一路讲到换肤架构，顺带把面试高频考点全部摆上台面。一、QSS与CSS：什么关系，差在哪1.1 定位与差异QSS是Qt Widgets的声明式样式机制，底层实现是QStyleSheetStyle——运行时它包装当前的QStyle（Windows、Fusion等），样式表规则在drawPrimitive/drawComplexControl等绘制节点上拦截原生绘制。和Web CSS的核心区别：子集+扩展：QSS只实现了CSS2.1里固定尺寸二维布局的部分，没有flex，没有transition、animation、transform；但多了CSS没有的子控件（::drop-down）和伪状态（:on、:off）。选择器阉割：不支持通配符*、不支持.类名这种样式类选择器，也没有:not()、:first-child、相邻兄弟+这些结构伪类。写惯Web的得先把手感收一收。单位：只有px和pt，没有em、%、rem。传播机制：样式表沿widget树的父子链向下传播并与后代样式表合并——这是大部分坑的根源。1.2 最小可用示例QPushButton{background-color:#4A90D9;color:white;border:none;border-radius:4px;padding:6px 16px;}五行QSS，按钮就脱离了原生丑样子。但也只是入门。二、选择器：QSS的核心武器2.1 类型、ID与类选择器类型选择器按类名匹配QPushButton，ID选择器按objectName匹配#btnSubmit，类选择器按属性值匹配QPushButton[flat="true"]，三者可以逗号分组、也可以叠加使用：QPushButton, QToolButton{font-size:14px;}QPushButton#btnSubmit{background-color:#2BB46A;}QPushButton[flat="true"]{border:none;background:transparent;}优先级规则：ID 类/属性 类型；QPushButton#btnSubmit这种叠加写法比单独用#btnSubmit更高。另外类选择器支持对数值属性做区间匹配：QProgressBar[progress=50]::chunk { background-color: #2BB46A; }，数值属性直接用、=比较即可，不用自己再包一层动态属性。但能匹配的值只有字符串和数值两种形态，Web里那些花哨的属性模糊匹配在Qt这儿统统不存在。2.2 后代与子选择器空格是后代选择器（任意深度），是子选择器（仅直接子级）。做局部作用域样式全靠它们：#toolbar QToolButton{border:none;}QDialog QPushButton{min-width:80px;}2.3 伪状态:hover、:pressed、:checked、:disabled、:focus、:selected都有，是交互样式的主战场：QPushButton:hover{background-color:#5FA3E6;}QPushButton:pressed{background-color:#3A72B0;}QLineEdit:focus{border:1px solid #4A90D9;}QC