Qt 样式表qss学习

语法

/* 语法结构 */
selector { attribute: value }

selector（选择器）

• selector（选择器）：指定要应用样式的控件类型或特定控件。例如：
  • QWidget：所有QWidget及其子类。
  • QPushButton：所有QPushButton控件。
  • QGroupBox：所有QGroupBox控件。
  • #objectName：通过对象名称指定特定控件。
  • .className：通过样式表类名指定特定控件。
  • :pseudo-state：指定控件的伪状态（如:hover、:pressed等）。

选择器类型：

子控件：
对于一些复杂的部件修改样式，可能需要访问它们的子部件，如QComboBox的下拉按钮，QSpinBox的向上、向下箭头灯。用:: 访问。

伪状态：
选择器可以使用状态来限制在部件的指定状态上的应用。伪状态在选择器之后，用冒号:隔离。如：鼠标悬停在按钮上时其按钮的颜色为白色QPushButton:hover{color:white}。

attribute（属性）

官方文档
第三方教程

• attribute（属性）：定义控件的外观特性，如颜色、边框、背景等。
  • color：文本颜色。
  • background-color：背景颜色。
  • border：边框样式。
  • padding：内边距。
  • margin：外边距。
  • font：字体样式。
  • selection-color：选中时的文本颜色。
  • selection-background-color：选中时的背景颜色。

value（值）

• value（值）：与属性对应的值，可以是颜色、尺寸、字体等。

支持BOX MODEL

margin、border-width和padding属性都默认为0。在这种情况下，所有四个矩形(边距、边框、填充和内容)都完全重合。

冲突

样式冲突解决原则：
在Qt样式表（QSS）中，当多个样式规则对同一个属性指定不同的值时，就会产生冲突。Qt通过一套优先级规则来解决这些冲突，确保最终的样式是明确且一致的。

示例

QPushButton#okButton { color: gray; }
QPushButton { color: red; }

在这个例子中：

• QPushButton#okButton 是一个ID选择器，它针对的是具有特定ID（okButton）的QPushButton实例。
• QPushButton 是一个类型选择器，它针对的是所有QPushButton实例。

冲突解决规则

1. 特殊选择器优先：

   • ID选择器（如#okButton）比类型选择器（如QPushButton）更具体，因此具有更高的优先级。
   • 在这个例子中，QPushButton#okButton的样式规则会覆盖QPushButton的样式规则。
   • 因此，okButton按钮的文本颜色将是灰色（gray），而不是红色（red）。

2. 伪状态的优先级：

   • 如果样式规则中包含伪状态（如:hover、:pressed等），这些规则的优先级会更高。
   • 例如：

     QPushButton:hover { color: white; }
     QPushButton { color: red; }
     

     在这个例子中，当鼠标悬停在按钮上时，按钮的文本颜色将是白色（white），而不是红色（red）。

3. 多个伪状态的组合：

   • 伪状态可以组合使用，以实现更复杂的样式规则。
   • 例如：

     QPushButton:hover:checked { color: blue; }
     QPushButton:hover { color: white; }
     QPushButton { color: red; }
     

     在这个例子中：
     • 当按钮被选中且鼠标悬停时，文本颜色将是蓝色（blue）。
     • 当按钮未被选中但鼠标悬停时，文本颜色将是白色（white）。
     • 当按钮既没有被选中也没有鼠标悬停时，文本颜色将是红色（red）。

4. 逻辑或的使用：

   • 伪状态可以通过逗号分隔，实现逻辑或的效果。
   • 例如：

     QPushButton:hover, QPushButton:checked { color: white; }
     QPushButton { color: red; }
     

     在这个例子中：
     • 当按钮被鼠标悬停或被选中时，文本颜色将是白色（white）。
     • 当按钮既没有被鼠标悬停也没有被选中时，文本颜色将是红色（red）。

qss 示例

qss示例

示例：

1. 基本样式

QWidget {
    background-color: rgb(255, 255, 255); /* 白色背景 */
    color: rgb(0, 0, 0); /* 黑色文本 */
    font: 14px "Arial"; /* 字体大小和字体 */
}

2. 指定控件样式

QPushButton {
    background-color: rgb(255, 0, 0); /* 红色背景 */
    color: rgb(255, 255, 255); /* 白色文本 */
    border: 2px solid rgb(0, 0, 0); /* 黑色边框 */
    border-radius: 10px; /* 圆角边框 */
    padding: 5px; /* 内边距 */
}

3. 使用对象名称

QWidget#filemanager_memeryArea {
    background-color: rgb(228, 228, 228); /* 灰色背景 */
    border-radius: 5px; /* 圆角边框 */
}

4. 伪状态

QPushButton:hover {
    background-color: rgb(255, 165, 0); /* 鼠标悬停时的背景色 */
}

QPushButton:pressed {
    background-color: rgb(0, 255, 0); /* 按下时的背景色 */
}

5. 子控件样式

QGroupBox::title {
    subcontrol-origin: margin;
    subcontrol-position: top center;
    padding: 0 3px;
    background-color: rgb(200, 200, 200);
}

6. 组合选择器

QLineEdit, QComboBox {
    background-color: rgb(255, 255, 255); /* 白色背景 */
    border: 1px solid rgb(0, 0, 0); /* 黑色边框 */
}

7. 嵌套控件

QDialog QWidget {
    background-color: rgb(240, 240, 240); /* 对话框中的所有QWidget */
}

使用方式：

#include <QApplication>
#include <QFile>
#include <QTextStream>
#include <QDebug>

int main(int argc, char *argv[]) {
    QApplication app(argc, argv);

    QString styleSheetPath = ":/qdarkstyle/dark/darkstyle.qss"; // 替换为你的样式表路径
    QFile f(styleSheetPath);

    if (!f.exists()) {
        qDebug() << "Unable to set stylesheet, file not found:" << styleSheetPath;
    } else {
        f.open(QFile::ReadOnly | QFile::Text);
        QTextStream ts(&f);					// 流式加载
        app.setStyleSheet(ts.readAll());	// 这里应用
    }

    QWidget window;
    window.setWindowTitle("Test Window");
    window.resize(400, 300);
    window.show();

    return app.exec();
}

参考1