【分享】说说标准——关于样式的特殊性

2010-06-30 03:51:16 3.7k 阅读 AI 写同款 · GEO 优化AI 选题数据监测一键分发 ›

QT属性动画驱动样式表：原理、实现与性能优化指南在QT框架中，属性动画（QPropertyAnimation）是实现UI动态效果的核心机制，它基于元对象系统，通过插值计算驱动数值属性的平滑过渡。这项技术的核心价值在于将复杂的视觉变化转化为可控的数据流，从而提升交互体验与代码可维护性。然而，直接动画样式表（styleSheet）字符串会遇到插值无意义和性能瓶颈等挑战。通过将样式属性（如颜色、圆角、渐变角度）抽象为可动画的Q_PROPERTY或利用QVariantAnimation，开发者可以构建高效、灵活的动态样式系统。本文聚焦于QT属性动画与样式表的结合阅读详情

本文简单的介绍下何为选择器的特殊性，它是起什么作用的，以及特殊性怎么计算方面的知识。

所谓的特殊性是指，作用于同一元素的同一特性 (property)的不同选择器的多个值，哪个会起作用，特殊性值最高的会起作用。比如，如下代码中，多个样式中的 'background-color' 同时作用于同一个 DIV 元素，那么最后，到底 DIV 应该会是什么颜色呢？

<!DOCTYPE HTML>

<style type="text/css">

    div {

        width: 100px;

        height: 100px;

    }



    #c1 #c2 div.con {

        background-color: yellow;

    }



    div {

        background-color: black;

    }



    #c2 div {

        background-color: blue;

    }



    #c2 #content {

        background-color: red;

    }

</style>

<div id="c1">

    <div id="c2">

        <div id="content" class="con"></div>

    </div>

</div>

我们先来看一下特殊性的计算规则。

特殊性的值可以看作是一个由四个数组成的一个组合，用a，b，c，d来表示它的四个位置。依次比较a，b，c，d这个四个数比较其特殊性的大小。比如，a值相同，那么b值大的组合特殊性会较大，以此类推。注意，W3C中并不是把它作为一个4位数来看待的。

下面说明，a，b，c，d都是怎么确定的：
1. 如果 HTML 标签的 'style' 属性中该样式存在，则记 a 为 1；
2. 数一下选择器中 ID 选择器的个数作为 b 的值，比如，以上的 '#c1' 和 '#c2'都算；
3. 其他属性以及伪类（pseudo-classes）的总数量是 c 的值，比如，上面例子中的'.con'，':hover'等；
4. 元素名和伪元素的数量是 d 的值；比如上面例子中的 ‘div’。

W3C官方给出的例子：

 *             {}  /* a=0 b=0 c=0 d=0 -> specificity = 0,0,0,0 */

 li            {}  /* a=0 b=0 c=0 d=1 -> specificity = 0,0,0,1 */

 li:first-line {}  /* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */

 ul li         {}  /* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */

 ul ol+li      {}  /* a=0 b=0 c=0 d=3 -> specificity = 0,0,0,3 */

 h1 + *[rel=up]{}  /* a=0 b=0 c=1 d=1 -> specificity = 0,0,1,1 */

 ul ol li.red  {}  /* a=0 b=0 c=1 d=3 -> specificity = 0,0,1,3 */

 li.red.level  {}  /* a=0 b=0 c=2 d=1 -> specificity = 0,0,2,1 */

 #x34y         {}  /* a=0 b=1 c=0 d=0 -> specificity = 0,1,0,0 */

 style=""          /* a=1 b=0 c=0 d=0 -> specificity = 1,0,0,0 */



<HEAD>

<STYLE type="text/css">

  #x97z { color: red }

</STYLE>

</HEAD>

<BODY>

<P ID=x97z style="color: green">

</BODY>

现在，让我们回到一开始的例子，计算下各个样式的特殊性的值：

<!DOCTYPE HTML>

<style type="text/css">

    div {                 

        width: 100px;

        height: 100px;

    }



    #c1 #c2 div.con {     /* a=0 b=2 c=1 d=1 -> specificity = 0,2,1,1 */

        background-color: yellow;

    }



    div {                 /* a=0 b=0 c=0 d=1 -> specificity = 0,0,0,1 */

        background-color: black;

    }



    #c2 div {             /* a=0 b=1 c=0 d=1 -> specificity = 0,1,0,1 */

        background-color: blue;

    }



    #c2 #content {        /* a=0 b=2 c=0 d=0 -> specificity = 0,2,0,0 */

        background-color: red;

    }

</style>

<div id="c1">

    <div id="c2">

        <div id="content" class="con"></div>

    </div>

</div>