QT样式表语法（The Style Sheet Syntax）学习记录

QT样式表语法（The Style Sheet Syntax）学习记录

直接参考QT文档（the style sheet syntax）翻译一部分

Qt Style Sheet的术语和语法与HTML CSS几乎完全相同（也就是说还是有些不同的）。

1、 Style Rules

示例：

 QPushButton { color: red }

1. 样式规则（style rule ）：由 选择器+声明 构成

   • 选择器：指明规则的影响对象——QPushButton
     多个选择器有相同声明时可以写到一起用“，”隔开：

     QPushButton, QLineEdit, QComboBox { color: red }

   • 声明：指定了构件哪些属性要设置及设置的样式——{ color: red }
     声明必须写在“{ }”中，由一对 属性：值 构成一个语句，多个语句间用“；”分隔。也可以 多值属性：Value1 value2 value3 ..;
     具体的属性请去官网查看，需要说一下，例如：border你必须设置好border-style:solid，并且设置好border-width才能看到它，不然你设置了颜色也看不到，其它的类似。属性表的有“*”号的是QT独有的，CSS里没有。一般都通用所有widget，除非特别指出了，比如。text-align,只有QPushButton 和 QProgressBar.才能用，哭死。。

2. 样式表（Style sheets）：由一组 样式规则 序列 组成（注意序列，因为排序对规则是有影响的，可参见Conflict Resolution一节）

3. QT样式表一般是不区分大小，除了几个例外（ class names, object names, and Qt property names），即color, Color, COLOR, 和 cOloR都是指同一个颜色属性

2、 Selector Types

• Qt Style Sheets 支持所有的 在 CSS2定义的选择器的书写模式，下面列举几个常用的.

  Selector	例子	说明
  通配选择器	*	匹配所有widgets.
  类型选择器	QPushButton	匹配所有 QPushButton类及其全部子类的实例
  属性选择器	QPushButton[flat=”false”]	匹配所有QPushButton类中属性flat=”false”的实例
  子类选择器	.QPushButton	匹配所有QPushButton类（不包含它的子类）的实例，排除了子类哟
  ID选择器	QPushButton#okButton	匹配QPushButton类中指明了ID叫okButton的实例
  Descendant Selector	QDialog QPushButton	匹配所有派生自QDialog的QPushButton类的实例,可以是多重派生下来的，
  Child Selector	QDialog > QPushButton	匹配所有直接从QDialog派生下来的QPushButton的实例，只能单重派生下来的，即children,不能是grandchildren

  举个例子，在用右键单击改变样式表给MAINWINDOW控件写QT样式表时通常该窗口下的所有控件都跟着变化了，因为其默认是类型选择器模式，所以要想不影响窗口里面的子控件就需要用QMainWindow#Mainwindow{...}这样的方式了，

3、 Sub-Controls(子控件)—::

对复杂小部件进行样式化，就必定要访问该部件的子控件，例如QComboBox的下拉按钮或QS​​pinBox的上下箭头。QT选择器可以包含子控制，这使得它可以将规则的应用限制到特定的子控件上。例如：

 QComboBox::drop-down { image: url(dropdown.png) }
/* 这样对所有QComboBox的下拉按钮进行了样式设置。*/

4、 Pseudo-States（伪状态）—:

选择器可以包含伪状态，其表示基于小部件的状态来限制规则的应用。伪状态要放要选择器或子控件的尾端，两者之间用冒号“:”分隔。例如：

QPushButton:hover { color: white }
/* 鼠标悬停在QPushButton时颜色为白*/
QComboBox::drop-down:hover { image: url(dropdown_bright.png) }

伪状态可以用“！”来取反，也可以串联多个伪状态，之间用“：”隔开，串联的伪状态必须都满足才用应用规则如下：

QPushButton:hover:!pressed { color: blue; }
/* 鼠标悬停在QPushButton时并且未按下时颜色为蓝*/

伪状态也可以并联，之间用“，”隔开，如下：

QCheckBox:hover, QCheckBox:checked { color: white }
/* 鼠标悬停在QCheckBox或者QCheckBox被勾选时时颜色为白*/

5、 Conflict Resolution（冲突解决机制）

一般我们都会遇上这样的问题：不同的样式规则作用在同一个控件属性，那到底应该用哪个呢？比如：

QPushButton#okButton { color: gray }
QPushButton { color: red }

QPushButton作用在所有的点击控件上，但上面还指明了叫okButton的点击控件又是另一种颜色，那到底用哪种呢？

QT的规则是：

• 优先特异性（specificity）清晰的，就是表述精确的覆盖表述模糊的属性
  如：有伪状态的优先于没有伪状态的，具体的ID控件优先类控件等等

  QPushButton:hover { color: white }
  QPushButton { color: red }

  QPushButton#okButton { color: gray }
  QPushButton { color: red }

• 如果特异性级别没差，则按规则顺序，后者覆盖前者。

  QPushButton:hover { color: white }
  QPushButton:enabled { color: red }

  鼠标移过一个按下去的QPushButton时，它是红色的，

  QPushButton:enabled { color: red }
  QPushButton:hover { color: white }

  鼠标移过一个按下去的QPushButton时，它是白色的

• 特别的，有继承关系的类之间是没有特异性差异的，无论你是否为更具体的类，如

  QPushButton { color: red }
  QAbstractButton { color: gray }

  所有的属于QAbstractButton类的控件都是灰色的，包括QPushButton类（因为QPushButton是继承自QAbstractButton，也属于QAbstractButton），

  具体的一个选择器的特异性量度规则参见CSS2 Specification，
  通过统计各属性的数量来计算，计算结果用三个变量（a,b,c）来保存，最终结果为 x = a*100+b*10+c,计算出的数值越大越优先。

  • a:统计选择器中ID属性的个数；
  • b:统计选择器其它属性和伪状态的个数；

  • c:统计选择器元素名的个数；
    示例如下：

    *             {}  /* a=0 b=0 c=0 -> specificity =   0 */
    LI            {}  /* a=0 b=0 c=1 -> specificity =   1 */
    UL LI         {}  /* a=0 b=0 c=2 -> specificity =   2 */
    UL OL+LI      {}  /* a=0 b=0 c=3 -> specificity =   3 */
    H1 + *[REL=up]{}  /* a=0 b=1 c=1 -> specificity =  11 */
    UL d  {}  /* a=0 b=1 c=3 -> specificity =  13 */ 
    LI.red.level  {}  /* a=0 b=2 c=1 -> specificity =  21 */#x34y         {}  /* a=1 b=0 c=0 -> specificity = 100 */ 
    

6、 QT 样式各部分的可用参数导航：

• 图示导航：
  控件 :: 子控件 : 伪状态
  {
  样式属性:参数类型
  }

• 列表导航：

  1. 支持样式表的Widgets
  2. Widgets支持的样式属性
  3. 样式属性的参数类型列表
     比如对齐模式Alignment有哪些可选参数，Border Style可以支持哪几种。。。
  4. 支持的伪状态
  5. 支持的子控件
     描述项里列出了支持该子控件的widgets