我 的 个 人 主 页:👉👉 失心疯的个人主页 👈👈
入 门 教 程 推 荐 :👉👉 Python零基础入门教程合集 👈👈
虚 拟 环 境 搭 建 :👉👉 Python项目虚拟环境(超详细讲解) 👈👈
PyQt5 系 列 教 程:👉👉 Python GUI(PyQt5)文章合集 👈👈
Oracle数据库教程:👉👉 Oracle数据库文章合集 👈👈
优 质 资 源 下 载 :👉👉 资源下载合集 👈👈
QSS 语法
- 语法
- 语法
选择器[:为状态]{ 声明 }
- 示例
QLabel#l1:hover{ background-color: orange; } /* QLabel:类选择器 #l1:ID选择器 hover:为状态 {}:中间部分为声明 */
- 语法
- 组成
- QSS选择器
- 指明哪些控件会受到样式的作用
- 如:控件类型、控件ObjectName
- QSS为状态
- 控制控件在不同状态下展示不同样式
- 如:鼠标滑上、鼠标滑走、按下等状态
- 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; }
- py文件