084.PyQt5_QSS_语法&选择器

  

我 的 个 人 主 页： 失心疯的个人主页
入 门 教 程 推 荐 ： Python零基础入门教程合集
虚 拟 环 境 搭 建 ： Python项目虚拟环境(超详细讲解)
PyQt5 系 列 教 程： Python GUI(PyQt5)文章合集
Oracle数据库教程： Oracle数据库文章合集
优 质 资 源 下 载 ： 资源下载合集

QSS 语法

• 语法
  • 语法

    选择器[:为状态]{
        声明
    }
    

  • 示例

    QLabel#l1:hover{
        background-color: orange;
    }
    
    /*
    QLabel：类选择器
    #l1：ID选择器
    hover：为状态
    {}：中间部分为声明
    */
    

• 组成
  • QSS选择器
    • 指明哪些控件会受到样式的作用
    • 如：控件类型、控件ObjectName
  • QSS为状态
    • 控制控件在不同状态下展示不同样式
    • 如：鼠标滑上、鼠标滑走、按下等状态
  • QSS声明
    • 指明具体的样式
    • 如：背景、字体尺寸、边框

---

• QSS选择器
  • 通配符选择器
    • *：匹配所有控件
    • 示例

      * {
          background-color: gray;
      }
      

  • 类型选择器
    • 控件类型：通过控件类型来匹配控件，包含其子类
    • 示例：匹配所有QPushButton及其子类(并非子控件)的控件实例

      QPushButton {
          background-color: cyan;
      }
      

  • 类选择器
    • .控件类型：通过控件类型来匹配控件(不包含子类)
    • 示例：只匹配QPushButton控件，不包含其子类

      .QPushButton {
          background-color: cyan;
      }
      

  • ID选择器
    • #objectName：通过objectName来匹配控件
    • 示例：匹配所有objectName为hehe的控件

      #hehe {
          background-color: pink;
      }
      

  • 属性选择器
    • 控件类型[属性名[="属性值"]]：通过属性值来匹配控件
    • 控件通过 setProperty(属性名,属性值) 设置属性
    • 示例1：匹配所有QLabel控件中属性notice_level值为"wanrning"的控件

      /*.QLabel：仅仅是QLabel类，并不包含其子类*/
      .QLabel[notice_level='wanrning'] {
          /*设置边框：粗细 实线 黄色*/
          border: 3px solid yellow;
      }
      

    • 示例2：匹配所有QLabel控件中属性为notice_level的控件

      /*.QLabel：仅仅是QLabel类，并不包含其子类*/
      .QLabel[notice_level] {
          /*设置边框：粗细 实线 黄色*/
          border: 3px solid yellow;
      }
      

  • 后代选择器
    • 父控件 子控件：通过父控件（直接或间接）子控件来筛选控件
    • 示例：匹配objectName为box1的控件中所有的QLabel控件（包含间接包含部分）

      /*直接或间接 子控件*/
      QWidget#box1 QLabel {
          background-color: pink;
      }
      

  • 子选择器
    • 父控件>子控件：通过父控件的直接子控件来筛选控件
    • 示例：匹配objectName为box1的控件中的直接子控件QLabel控件

      /*直接子控件*/
      QWidget#box1>QLabel {
          background-color: pink;
      }
      

  • 子控件选择器
    • 复核控件::子控件：用来筛选一个复核控件上的子控件
    • 复核控件常用子控件：

    QCheckBox, QRadioButton
        ::indicator         # 勾选框
        
    QComboBox
        ::drop-down         # 右侧下拉箭头按钮
    
    QSpinBox, QDateEdit, QTimeEdit, QDateTimeEdit
        ::up-button
        ::down-button
        ::up-arrow
        ::down-arrow
    
    QSlider
        ::
    
    QProgressBar
        ::
        
    QScrollBar
        ::
        
    ...
    
    

  • 注意：以上选择器可以组合使用，手拍鼓逗号隔开即可

    /*匹配objectName为box1控件的QLabel类型直接子控件和配objectName为btn1和配objectName为btn2的控件*/
    QWidget#box1>QLabel,#btn1,#btn2 {
            background-color: pink;
        }
    

---

• 示例代码
• 示例1：QSS选择器
  • py文件

    from PyQt5.Qt import *
    import sys
    
    class MyWind(QWidget):
        def __init__(self,parten=None, w_name=None):
            super().__init__(parten)
            self.n = w_name
            lab1 = QLabel('窗口'+self.n+'_标签控件1', self)
            lab2 = QLabel('窗口'+self.n+'_标签控件2', self)
            btn1 = QPushButton('窗口'+self.n+'_按钮控件1', self)
            btn2 = QPushButton('窗口'+self.n+'_按钮控件2', self)
            lab3 = QLabel('按钮内的标签', btn1)
            # ID选择器
            btn1.setObjectName('btn1')
            btn2.setObjectName('btn2')
            # 属性选择器
            lab1.setProperty('level','wanrning_'+w_name)
    
            w = 200
            h = 50
            x = 20
            y = 20
            lab1.resize(w, h)
            lab2.resize(w, h)
            btn1.resize(w, h)
            btn2.resize(w, h)
    
            lab1.move(x, y)
            lab2.move(lab1.x(), lab1.y()+lab1.height()+20)
    
            btn1.move(lab1.x()+lab1.width()+20, lab1.y())
            btn2.move(btn1.x(), lab2.y())
    
    
    class Windows(QWidget):
        def __init__(self):
            super().__init__()
            self.setWindowTitle('QSS-初体验')
            self.resize(500, 500)
            self.widget_list()
    
        def widget_list(self):
            self.add_widget()
    
    
        def add_widget(self):
            w1 = MyWind(w_name='w1')
            w2 = MyWind(w_name='w2')
            w3 = MyWind(w_name='w3')
    
            w1.setObjectName('w1')
    
            cb = QComboBox()
            cb.addItem('中国')
            v_layout = QVBoxLayout()
            self.setLayout(v_layout)
            v_layout.addWidget(w1)
            v_layout.addWidget(w2)
            v_layout.addWidget(w3)
            v_layout.addWidget(cb)
    
    if __name__ == '__main__':
        app = QApplication(sys.argv)
        window = Windows()
    
        with open('style.qss', 'r',encoding='utf-8') as f:
            result = f.read()
            app.setStyleSheet(result)
    
        window.show()
        sys.exit(app.exec_())
    

  • QSS文件：style.qss

    /* 通配符选择器 */
    /*
    * {background-color: cyan;}
    */
    
    /* 类型选择器 */
    /*
    QWidget {background-color: red;}
    */
    
    /* 类选择器*/
    /*
    .QPushButton {background-color: red;}
    */
    
    /* ID选择器*/
    /*
    #btn2 {background-color: yellow;}
    */
    
    /* 属性选择器*/
    /*
    QLabel[level = 'wanrning_w1'] {background-color: yellow;}
    
    QLabel[level] {background-color: green;}
    */
    
    /* 后代选择器 */
    /*
    QWidget#w1 QLabel{background-color: blue;}
    */
    
    /*子选择器*/
    /*
    QWidget#w1>QLabel{background-color: blue;}
    */
    
    /* 复合控件子控件选择器*/
    QComboBox::drop-down{background-color: blue;}
    
    /* 组合使用*/
    QWidget#w1>QLabel,#btn1,#btn2{
        background-color: pink;
    }