一、QSS的8種選擇器演示

1. 萬用字元

 # 1.萬用字元選擇器：匹配所有控制元件
        '''
        *{  // 用*號匹配所有控制元件
            color:green;
        }
        '''
        # 2.型別選擇器（通過控制元件型別來匹配控制元件包含子類）
        '''
        QPushButton{
            font-size:30px;
        }

        Btn{
            font-size:30px;
        }
        '''
        # 3.類選擇器(通過控制元件型別匹配 不包括子類)
        '''
        .QPushButton{
            font-size: 30px;
        }
        '''
        # 4.ID選擇器setObjectName #和字母之間不能有空格
        '''
        #btn{
            background-color:green;
        }
        '''
        # 5.屬性選擇器setProperty
        '''
        QPushButton[name="btn"]:hover{
            background-color:red;
        }
        // 表示只要加上setProperty的所有name屬性按鈕都是紅色背景，不影響其他無樣式按鈕的新建
        QPushButton[name]:hover{  
            background-color:red;
        }
        '''
        # 6.後代選擇器(通過父控制元件直接或間接作用於子控制元件QPushButton)
        '''
        QWidget#box QPushButton{
            background-color:green;
        }
        '''
        # 7.子選擇器（直接包含的子控制元件）
        '''
        QWidget#box>QLabel{
            background-color:green;
        }
        '''
        # 8.子控制元件選擇器(主要用於組合控制元件中的一部分元件樣式修改)
        # 8.1.常見偽狀態
        '''
        :checked  # 控制元件被選中
        :unchecked  # 控制元件被取消選中
        :hover  # 滑鼠停留
        :pressed  # 控制元件被按下
        :focus  # 獲取到焦點
        :disable  # 失效控制元件
        :enable  # 有效控制元件
        :indeterminate  # checkBox或radioButton被部分選中
        :on  # 開啟狀態
        :off  # 關閉狀態
        '''
        # 8.2.常用組合控制元件子控制元件
        '''
        QCheckBox, QRadioButton    ::indicator
        QComboBox                  ::drop-down
        QSpinBox, QDateEdit, QTimeEdit, QDateTimeEdit    ::up-button  ::down-button  ::up-arrow  ::down-arrow
        QSlider                    ::groove  ::handle  ::add-page  ::sub-page
        QProgressBar               ::chunk
        QScrollBar                 ::sub-line, ::add-line  ::sub-page, ::add-page  ::up-arrow, ::down-arrow  ::left-arrow, ::right-arrow
        QGroupBox                  ::title  ::indicator
        QTableView                 ::item
        QHeaderView, QTableCornerButton   ::section
        QTreeView                  ::item  ::branch
        QHeaderView                ::section
        QTabWidget                 QTabWidget::pane  QTabWidget::tab-bar  QTabBar::tab  QTabBar::close-button  QTabBar::tear  QTabBar::scroller  QTabBar QToolButton::left-arrow  QTabBar QToolButton::right-arrow  
        '''

        '''
        QCheckBox::indicator{
            width: 20px;
            height: 20px;
        }
        QCheckBox::indicator:checked{
            image: url(y.png);
        }
        QCheckBox::indicator:unchecked{
            image: url(n.png);
        }
        '''

        # 9.選擇器的組合使用(使用逗號隔開)
        '''
        #aaa,#bbb{
            color: red;
        }
        '''
 

2.程式碼

from PyQt5.Qt import *
import sys


class Btn(QPushButton) :
    pass


class Window(QWidget) :
    def __init__(self) :
        super().__init__()
        self.setWindowTitle("QSS選擇器使用方法總結 - PyQt5中文網")
        self.resize(600, 500)
        self.func_list()

    def func_list(self) :
        self.func()

    def func(self) :
        box = QWidget(self)
        box.setObjectName('box')

        box1 = QWidget(box)
        box1.setObjectName('box')
        box1.resize(100, 60)
        box1.move(250, 200)
        box1.setStyleSheet('border:1px solid red')

        label1 = QLabel('標籤1', box)
        label1.move(100, 200)
        label1.resize(100, 50)
        label1.setObjectName('aaa')
        label2 = QLabel('標籤2', box1)
        label2.move(250, 200)
        label2.resize(100, 50)
        label2.setStyleSheet('color:red;')
        label3 = QLabel('標籤3', self)
        label3.move(400, 200)
        label3.resize(100, 50)
        label3.setObjectName('bbb')

        btn1 = QPushButton('按鈕1', box)
        btn1.move(100, 100)
        btn1.resize(100, 50)
        btn1.setProperty('name', 'btn1')
        btn2 = QPushButton('按鈕2', self)
        btn2.move(250, 100)
        btn2.resize(100, 50)
        btn3 = QPushButton('按鈕3', self)
        btn3.setProperty('name', 'btn')
        btn3.move(100, 300)
        btn3.resize(100, 50)
        btn4 = Btn('按鈕4', self)
        btn4.setObjectName('btn')
        btn4.move(250, 300)
        btn4.resize(100, 50)

        print(box1.children())

        ck = QCheckBox('選擇正確答案', self)
        ck.move(150, 400)
        ck.resize(100, 40)

        sb = QSpinBox(self)
        sb.move(300, 400)
        sb.resize(100, 40)

       

        pass


if __name__ == '__main__' :
    app = QApplication(sys.argv)
    window = Window()

    with open('qss11_2.qss', 'r', encoding='UTF-8') as f :
        qApp.setStyleSheet(f.read())

    window.show()
    sys.exit(app.exec_())
 

• qss11_2.qss

 /*
 *{
            color:green;
        }


QPushButton{
            font-size:30px;
        }

Btn{
            font-size:30px;
        }

.QPushButton{
            font-size: 30px;
        }

#btn{
            background-color:green;
        }

QPushButton[name]:hover{
            background-color:red;
        }

QWidget#box QPushButton{
            background-color:green;
        }

QWidget#box>QLabel{
            background-color:green;
        }

QCheckBox::indicator{
           width: 20px;
           height: 20px;
           background-color:green;
        }

QCheckBox::indicator:checked{
            image: url(y.png);
        }

QCheckBox::indicator:unchecked{
            image: url(n.png);
        }

#aaa,#bbb{
            color: red;
        }
*/