通过样式表和HTML类在Qt QLabels中设置样式

时间:2016-03-24 09:30:02

标签: css qt pyqt

我的Python / Qt 4.8 GUI中有一个QLabel,它包含一个表格。我想用不同的颜色设计这个表的元素。我意识到我可以使用<font>标签,但使用类和CSS似乎更优雅一些。我希望它看起来像这样:

what I want it to look like

我的HTML看起来像这样:

<table width=100%>
        <tr class="spec"><td>Wavelength:</td><td>{0:.2f} µm</td></tr>
        <tr class="spec"><td>Bandwidth:</td><td>{1:.2f} µm</td></tr>
        <tr class="oldPM"><td>Power:</td><td>{2:.1f} mW</td></tr>
        <tr class="newPM"><td>{3:.0f} sec stability:</td><td>{4:.1%} rms</td></tr>
        <tr class="newPM"><td></td><td>{5:.1%} p2p</tr>
</table>

我的CSS就像这样:

#oldPM {color: #333333}
#spec {color: blue}
#newPM {color: #333333}

但是Qt似乎没有认识到类选择器。这是Qt造型的基本限制,还是我做错了什么?我可以使用QLabel作为选择器来改变整个QLabel的样式,但我希望它的不同部分采用不同的样式。

1 个答案:

答案 0 :(得分:2)

QWidget::setStyleSheet用于将Qt样式表(QSS)应用于窗口小部件。它不支持使用CSS设置小部件富文本内容的样式。

您可以将{CSS}支持的QLabel内容添加到<style>内容http://doc.qt.io/qt-4.8/richtext-html-subset.html

另请注意,#spec选择器将应用于id="spec"的元素。要选择class="spec"类的元素,您应该使用以下语法:.spec

所以QLabel的全文应该是:

<style>
    .oldPM {color: #333333}
    .spec {color: blue}
    .newPM {color: #333333}
</style>
<table width=100%>
    <tr class="spec"><td>Wavelength:</td><td>{0:.2f} µm</td></tr>
    <tr class="spec"><td>Bandwidth:</td><td>{1:.2f} µm</td></tr>
    <tr class="oldPM"><td>Power:</td><td>{2:.1f} mW</td></tr>
    <tr class="newPM"><td>{3:.0f} sec stability:</td><td>{4:.1%} rms</td></tr>
    <tr class="newPM"><td></td><td>{5:.1%} p2p</tr>
</table>