1 选择器

(1) 通配选择器

*, 匹配所有的控件

(2) 类型选择器

QPushButton, 匹配所有的QPushButton类及其子类的实例

(3) 属性选择器

QPushButton[name=”btn_1”]
匹配所有的name属性为btn_1的QPushButton实例

  1. # 可通过setProperty方法设置自定义属性
  2. btn_1.setProperty("name", "mybtn")

(4) 类选择器

.QPushButton
匹配所有的QPushButton类, 但不匹配其子类的实例

(5) ID选择器

btn_1
匹配所有objectName(ID)为btn_1的控件, 当然, 由于ID是唯一的, 所以只会匹配到1个

(6) 后代选择器

QDiaglog QPushButton
匹配所有的QDialog容器中包含的所有QPushButton, 是祖孙关系也可以

(7) 子选择器

QDiaglog > QPushButton
匹配所有的QDialog容器中包含的QPushButton, 必须是父子关系才能匹配

(8) 子控件选择器

  1. 子部件    描述
  2. ::down-arrow    combo box或spin box的下拉箭头
  3. ::down-button    spin box的向下按钮
  4. ::drop-down    combo box的下拉箭头
  5. ::indicator    checkbox、radio button或可选择group box的指示器
  6. ::item            menu bar或status bar的子项目
  7. ::menu-indicator    push button的菜单指示器
  8. ::title    group box的标题
  9. ::up-arrow    spin box的向上箭头
  10. ::up-button    spin box的向上按钮
  1. QComboBox::drop-down {
  2.     image: url(dropdown.png);
  3. }
  4. QTabBar::tab {
  5.     height:17px;
  6. }

(9) 伪状态选择器

  1. 伪状态    描述
  2. :checked    button部件被选中
  3. :disabled    部件被禁用
  4. :enabled    部件被启用
  5. :focus    部件获得焦点
  6. :hover    鼠标位于部件上
  7. :indeterminate    checkbox或radiobutton被部分选中
  8. :off    部件可以切换，且处于off状态
  9. :on    部件可以切换，且处于on状态
  10. :pressed    部件被鼠标按下
  11. :unchecked    button部件未被选中
  1. QPushButton:pressed {
  2.     border-color: #707070;
  3.     border-width: 2px;
  4.     border-style: solid;
  5.     border-radius: 2px;
  6.     background-color: #1e1d23;  
  7.     color: #37efba;
  8. }
  9. QTableView::item:hover {    
  10.     background-color: #a1b1c9;        
  11. }

2 使用技巧

(1) 联合使用

  1. #btn_1, #btn_2, #btn_3 {
  2.     background-color: blue;
  3. }

(2) 后代选择器 搭配 属性选择器

  1. QDiaglog QPushButton[name="btn_1"] {
  2.     background-color: blue;
  3. }

(3) ID选择器 搭配 子控件选择器

  1. QTabWidget#tab_set::tab-bar::tab {
  2.     height: 28px;
  3. }

3 装载Qss

(1) 定义一个字符串, setStyleSheet

  1. qss_style = """
  2.     QTableView::item:hover {  
  3.        background-color: #a1b1c9;    
  4.     }
  6. """
  7. app.setStyleSheet(gv.qss_style)

(2) 对单个控件setStyleSheet

  1. self.btn_new_cfg_file.setStyleSheet("""
  2.     QPushButton {
  3.         background-color: #888888;
  4.     }
  5. """)

(3) 在designer中设置样式表

  1.     * {
  2.         font-size: 12px;
  3.         font-family: "Microsoft YaHei";
  4.     }
  5.     QTableView {
  6.         background: white;
  7.         selection-color: #000000;
  8.         selection-background-color: #c4e1d2;  
  9.         gridline-color: rgb(213, 213, 213); 
  10.         alternate-background-color: rgb(243, 246, 249);
  11.     }
  12.     QTableView::item:hover    {
  13.         background-color: #a1b1c9;
  14.     }