Qt（一）--- QSS的语法

忘是亡心i 2022-08-21 07:43 259阅读 0赞

Qt中的除了进来比较流行的使用qml进行界面的美化外，在早期，也就是4.x版本中，使用得比较多的的就是qss，就如qml是javascipt的变形体一样，qss是css的变形体，当然语法是和css基本一致，然后阅读了Qt的Assitant的帮助文档后，花了两天时间，大致了解了qss的语法，然后交流一下学习心得。（PS:不会CSS，然后大致去翻阅了CSS,Assitant 的 qss内容太少，所以需要进步了解css语法）

首先，迎面而来你的就是Box Model啦，先学习一下Box Model:

#  #

# Box Model #

先学习Assitant给的图：

![20160422232105171][]

是不是不太明白：好吧，我也不太懂啥意思，再来第二张图：

![20160422232240797][]

*  首先对于外边距，边框，内边缘，在默认条件下是等于0的；
 *  通常所说的background指的是padding那个矩形框以内的内容(这是我实验后得出的结论，不知对与否)；

来一图看看是不是呢：

![20160422233153003][]

然后看看代码的具体情况：

QWidget#testWidget
    {
        border: 10px  solid;
        border-color:black;
        padding:30px;
        background-color:red;
    }
    
    QWidget#widget
    {
        border:10px  solid;
        border-color:black;
        padding:60px;
        background-color:red;
    }

#  #

# qss语法 #

## 1、什么是selector ##

选择器是可以唯一标识一类或者某一个对象的，在Qt中，可以是QWidget，也可以是它派生出来的之类，比如QPushButton。有了选择器，我们尽可以对这个类型的对象进行声明，也就是通俗意义上的美化。

那么对于选择器，有那几种定义方法呢：

![20160422234130851][]

说明：

1、对于\*而言，是为了匹配所有的控件，所有的Widget的性质都统一通过这个一个选择器设置好了；

2、Type类选择器对所有的某一控件或者及其派生的子类空间都适用；

3、属性选择器是对已经制定某种属性值的类进行性质上的声明；

4、Class选择器，是仅仅只对某种父类控件适用，但对其子类空间不产生影响；

5、ID选择器是对某一类控件的具体实例来进行性质上的控制，通常这个标识是通过object name制定的；我觉得这个用的会比较多一点；

6、子类选择器，child selector，这个当然也是很管用的，是对某一类控件中的某一个元素进行控制，比如对于一个自定义的LineEdit，对于传统的QLineEdit，它是没有Label的，在qq的登陆界面中，可以看见在右边有一个小型的按钮，这个按钮是可以通过QLabel实现的，那么对于自定义的LineEdit，为了实现这个，使用LineEdit>QLabel设置附属于LineEdit的QLabel的属性了；

## 2、对复杂的widget的子控件的属性的控制 ##

很多widget有很多子控件，比如QSpinBox有上下两个按钮控制加减的，还有QComBox有一个用于导出下拉菜单选出的，对于子控件的属性的控制，qss也进行了说明：

用：：号来导出widget的子控件，比如QComBox::drop-down\{image: url(dropdown.png)\}

这样就可以对子控件进行属性控制了。

##  3、Pseudo-States 伪状态 ##

什么是伪状态呢，当控件处于一般状态下，通俗的来说就是没有被选中，鼠标没有在控件上方游荡，没有被鼠标按压下，然后对于的就是鼠标在上方hover啦，被按压了，这些状态就叫伪状态。对于每一个状态，都一个对对其设置一些属性，使其呈现出不同的效果。怎么对应伪状态的属性呢，是通过：来实现的，当不处于某个状态时，可以用！:控制比如：

QPushButton:hover \{ color: white \}

QPushButton:!hover \{ color:black\}

一些常用的控件的伪状态有：

QPushButtoon:hover,pressed

QCheckBox:hover,checked,!hover:checked,hover:!checked

\{PS：类似这种hover:!check是伪状态链，可以多个状态组合的\}

截个图大家看看：

![20160423002525603][]

## 4、冲突的避免机制 ##

当使用了Type选择器定义了某种属性，但是又用了ID选择器定义了同一类的同一个属性。这个时候，这个属性应该满足那种规则呢：  
总的来说，就是所有条件先，满足更加具体的选择器定义的属性。

需要特别强调的是，这里的具体性，是针对选择器的具体性，比如class选择器>Type选择器，不是只得类的继承性，可能会觉得QPushButton比他的父类， QAbstractButton更加具体，因此当出现一下语句时候：

![20160423004010216][]

可能会觉得，应该是QPushButton应该是北京哪个应该是红色的，实质上，背景却是灰色的：因为在类型选择器中QPushButton和QAbstractButton是同一种类型，因此这个时候应该是语句执行的先后顺序的问题，因此后一句的声明生效。

大致会经常用到的语法就是这些了，具体的深层次需要更加深入的学习Qt 的 Assistanct中有关StyleSheet的内容以及CSS的内容

[20160422232105171]: /images/20220724/53eefaaa62ca4bd0b03054a52235cf5d.png
[20160422232240797]: /images/20220724/948d561e5afa4da897630da40c4598a1.png
[20160422233153003]: /images/20220724/9d9705e93e3e4428b7fbe6708aed8584.png
[20160422234130851]: /images/20220724/31f7577b8713405699559d2049ca6632.png
[20160423002525603]: /images/20220724/3b82cfb160e740068418172a88a8f9b7.png
[20160423004010216]: /images/20220724/236f95be08884654b8cd964814b291bc.png