层叠样式表文件的处理方法、装置、设备及存储介质与流程

本申请涉及计算机技术领域，尤其涉及一种层叠样式表文件的处理方法、装置、设备及存储介质。

背景技术：

css(cascadingstylesheets层叠样式表)是一种用来表现html(hypertextmarkuplanguage，超文本标记语言)、xml(extensiblemarkuplanguage，可扩展标记语言)等文件样式的计算机语言，不仅可以静态地修饰网页，还可以配合各种脚本语言对网页中的元素进行格式化。

目前，随着计算机技术的不断发展和用户需求的日益更新，网页设计变更频繁，随着网页设计变更，网页的css文件中很可能会出现越来越多无用的样式规则(可称冗余样式规则)，这将导致网页文件的体积越来越大，进而影响网页文件的加载速度。

技术实现要素：

本申请实施例的目的在于提供一种层叠样式表文件的处理方法、装置、设备及存储介质，以实现将层叠样式表文件中的冗余样式规则删除，从而缩减网页文件体积，进而提高网页文件加载速度的有益效果。具体技术方案如下：

本申请提供一种层叠样式表文件的处理方法，所述方法包括：

获取待处理的层叠样式表文件、以及所述层叠样式表文件对应的标记语言文件；

生成所述标记语言文件的第一抽象语法树，在确定所述标记语言文件中包含动态元素时，对所述第一抽象语法树进行拆分，得到至少一个第二抽象语法树；

获取所述层叠样式表文件中包含的多个样式规则；

从所述多个样式规则中确定与至少一个所述第二抽象语法树相匹配的目标样式规则；

基于所述目标样式规则生成目标层叠样式表文件。

本申请提供一种层叠样式表文件的处理装置，所述装置包括：

文件获取模块，用于获取待处理的层叠样式表文件、以及所述层叠样式表文件对应的标记语言文件；

树生成模块，用于生成所述标记语言文件的第一抽象语法树，在确定所述标记语言文件中包含动态元素时，对所述第一抽象语法树进行拆分，得到至少一个第二抽象语法树；

样式获取模块，用于获取所述层叠样式表文件中包含的多个样式规则；

样式匹配模块，用于从所述多个样式规则中确定与至少一个所述第二抽象语法树相匹配的目标样式规则；

文件生成模块，用于基于所述目标样式规则生成目标层叠样式表文件。

本申请提供了一种设备，包括处理器、通信接口、存储器和通信总线，其中，处理器，通信接口，存储器通过通信总线完成相互间的通信；

存储器，用于存放计算机程序；

处理器，用于执行存储器上所存放的程序时，实现上述各种可选实现方式中提供的方法。

本申请提供一种存储介质，所述存储介质中存储有计算机指令，当其在计算机上运行时，使得计算机执行上述各种可选实现方式中提供的方法。

本申请提供一种计算机程序产品或计算机程序，该计算机程序产品或计算机程序包括计算机指令，该计算机指令存储在计算机可读存储介质中。电子设备的处理器从计算机可读存储介质读取该计算机指令，处理器执行该计算机指令，使得该电子设备执行上述各种可选实现方式中提供的方法。

本申请实施例提供的技术方案，通过在标记获取待处理的层叠样式表文件、以及层叠样式表文件对应的标记语言文件，生成标记语言文件的第一抽象语法树，在确定标记语言文件中包含动态元素时，对第一抽象语法树进行拆分，得到至少一个第二抽象语法树，获取层叠样式表文件中包含的多个样式规则，从多个样式规则中确定与至少一个第二抽象语法树相匹配的目标样式规则，基于目标样式规则生成目标层叠样式表文件，可以实现将层叠样式表文件中的冗余样式规则删除，从而缩减网页文件体积，进而提高网页文件加载速度。

进一步，在标记语言文件中包含动态元素的情况下，通过对标记语言文件的第一抽象语法树进行拆分，得到能够完整、准确表示标记语言文件结构的至少一个第二抽象语法树，之后基于该至少一个第二抽象语法树确定标记语言文件中的目标样式规则，即有效样式规则，则可以实现有效避免将有效样式规则错误识别为冗余样式规则。

附图说明

此处的附图被并入说明书中并构成本说明书的一部分，示出了符合本申请的实施例，并与说明书一起用于解释本申请的原理。

为了更清楚地说明本申请实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，对于本领域普通技术人员而言，在不付出创造性劳动性的前提下，还可以根据这些附图获得其他的附图。

图1为本申请实施例提供的一种层叠样式表文件的处理方法的实施例流程图；

图2为文件选择界面的示意图；

图3为第一抽象语法树的一种示例；

图4为第一抽象语法树的另一种示例；

图5为第二抽象语法树的一种示例；

图6为第二抽象语法树的另一种示例；

图7为第一抽象语法树的又一种示例；

图8为第二抽象语法树的又一种示例；

图9为第一抽象语法树的再一种示例；

图10为第二抽象语法树的再一种示例；

图11为本申请实施例提供的一种步骤105的实现流程；

图12为本申请实施例提供的一种层叠样式表文件的处理装置的实施例框图；

图13为本申请实施例提供的一种的设备的结构示意图。

具体实施方式

为使本申请实施例的目的、技术方案和优点更加清楚，下面将结合本申请实施例中的附图，对本申请实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例是本申请的一部分实施例，而不是全部的实施例。基于本申请中的实施例，本领域普通技术人员在没有做出创造性劳动的前提下所获得的所有其他实施例，都属于本申请保护的范围。

为便于对本申请实施例的理解，下面首先对本申请实施例涉及到的一些概念名词进行简要说明：

1、标记语言：

标记语言，也称置标语言，是一种将文本以及文本相关的其他信息结合起来，展现出关于文档结构和数据处理细节的电脑文字编码。如今广泛使用的标记语言包括但不限于：html、xml、wxml(weixinmarkuplanguage，微信标记语言等)，其中，wxml应用于微信小程序中，用于指定微信小程序界面的框架结构。

2、层叠样式表：

层叠样式表是一种用来用来表现html、xml等文件样式的计算机语言，不仅可以静态地修饰网页，还可以配合各种脚本语言对网页中的元素进行格式化。

进一步，微信层叠样式表是一套样式语言，用于描述微信标记语言的组件样式，即，微信层叠样式表用来决定微信标记语言的组件应该怎么显示。与wxml相同，微信层叠样式表文件也应用于微信小程序中，用于指定微信小程序界面的框架及元素的显示样式。

3、样式规则、样式选择器：

css文件中包含的即是各种样式规则，样式规则由样式选择器和声明块构成。其中，样式选择器用于声明要作用的对象，包括但不限于：类选择器、元素选择器、属性选择器、通配选择器等。声明是对具体样式规则的描述，由属性和值组成。举例来说，下述为一个样式规则的示例：

.first{//样式选择器，要作用的对象为属性class＝“first”的元素；

color：red//声明块，属性为颜色，值为红色；

}

4、抽象语法树(abstractsyntaxtree，简称ast)：

抽象语法树是源代码语法结构的一种抽象表示，它以树状的形式表现编程语言的语法结构，树上的每个节点都表示源代码中的一种结构。

以上对本申请实施例涉及到的一些概念名词进行了说明，下面将结合附图以具体实施例对本申请做进一步的解释说明，实施例并不构成对本申请实施例的限定。

参见图1，为本申请实施例提供的一种层叠样式表文件的处理方法的实施例流程图。在一个例子中，该方法可应用于电子设备，这里的电子设备可以是支持网络连接从而提供各种网络服务的硬件设备，包括但不限于智能手机、平板电脑、膝上型便携计算机、台式计算机、服务器等。如图1所示，该方法包括以下步骤：

步骤101：获取待处理的层叠样式表文件、以及层叠样式表文件对应的标记语言文件。

这里，待处理的层叠样式表文件对应的标记语言文件是指：待处理的层叠样式表文件用于描述其对应的标记语言文件的组件样式。在一个例子中，待处理的层叠样式表文件为微信层叠样式表文件，对应的标记语言文件则为微信标记语言文件。

在上述例子中，作为一实施例，电子设备可展示如图2所示例的界面。在应用中，用户可点击图2所示界面中“选择小程序的目录”按钮，电子设备在检测到“选择小程序的目录”按钮被触发时，可进一步通过界面交互方式接收用户选择的小程序根目录，比如“/f/miniprograms/projecta”，进一步，用户可点击图2所示界面中“开始扫描”按钮，电子设备在检测到“开始扫描”按钮被触发时，则可执行本申请实施例提供的层叠样式表文件的处理方法。

在应用中，微信小程序的所有页面都在小程序根目录的app.json文件中声明，因此，在本步骤101中，电子设备可以在接收到的小程序根目录下找到app.json文件，进而则可以找到微信小程序的所有页面。每一页面下后缀名为.wxml的文件为用于描述该页面框架结构的微信标记语言文件，后缀名为.wxss的文件则为用于描述该页面显示样式的微信层叠样式表文件，如此，电子设备则可以依次进入每一页面，根据后缀名获取待处理的微信层叠样式表文件，以及对应的微信标记语言文件。

步骤102：生成标记语言文件的第一抽象语法树。

在本步骤102中，可通过词法分析、语法分析生成标记语言文件的抽象语法树(以下为了描述方便，称为第一抽象语法树)。其中，词法分析又称扫描scanner，在对源代码进行词法分析时，将从源代码的首个字符处开始，逐个地读取字符，当遇到空格、操作符或者特殊符号时，认为一句话结束，然后按照预定的规则将读取到的每一句话合并成一个个的标识符，得到标记列表(也称一维数组)。语法分析又称解析器，通过语法分析可将词法分析出来的数组转换成树形的形式，同时验证语法，如果出现语法错误，则抛出语法错误。

举例来说，下述为微信标记语言文件的一种示例：

<viewclass＝“first”wx：if＝“{{test}}”>firstelement</view>

<viewclass＝“second”wx：else>secondelement</view>

<viewclass＝“third”>thirdelement</view>

通过上述词法分析、语法分析生成的第一抽象语法树如图3所示。

步骤103：在确定标记语言文件中包含动态元素时，对第一抽象语法树进行拆分，得到至少一个第二抽象语法树。

在上述步骤102的举例中，<view>element</view>表示标记语言文件中的一个元素，<view>为元素的开始标签，</view>为元素的结束标签，开始标签中包括为元素设置的属性，包括但不限于：class属性、控制属性(包括但不限于if、else、elif等)等。进一步，class属性可用于为元素应用一个或多个样式规则，达到设置元素样式的功能；控制属性则用来判断是否渲染该元素。

具体而言，在上述步骤102的举例中，当{test}为真时，对第一个元素和第三个元素进行渲染，而当{test}为假时，对第二个元素和第三个元素进行渲染。由此可见，上述步骤102举例的标记语言文件中的第一个元素和第二个元素是动态进行渲染的，在本申请实施例将动态进行渲染的元素称为动态元素。

进一步，假设上述步骤102举例的标记语言文件对应的层叠样式表文件如下：

上述示例的层叠样式表文件包含以下两种样式规则：.second+.third、.first+.third。然而图3所示例的第一抽象语法树中并不存在包含.first+.third这一样式规则的树结构，由此可见，在该种情况下，若通过图3所示例的第一抽象语法树确定层叠样式表文件中的冗余样式规则，则很可能将.first+.third这一有效的样式规则确定为冗余样式规则，导致错误识别。

基于此，在本步骤103中，在确定标记语言文件中包含动态元素时，对第一抽象语法树进行拆分，得到至少一个抽象语法树(为描述方便，以下称第二抽象语法树)，以使得该至少一个第二抽象语法树能够完整、准确地表示出包含动态元素的标记语言文件的结构，从而提高后续基于标记语言文件的抽象语法树确定层叠样式表文件中的冗余样式规则的准确性，避免将有效的样式规则错误识别为冗余样式规则。至于是如何对第一抽象语法树进行拆分，得到至少一个第二抽象语法树的，在下文中通过不同的实施例举例示出，这里先不做详述。

结合以上描述，作为一个实施例，在本步骤103中，若标记语言文件中包含设置有控制属性的元素，则将设置有控制属性的元素确定为动态元素，控制属性包括但不限于：if属性、else属性、elif属性等。其中，在微信标记语言中，wx：if属性等同于if属性，wx：else属性等同于else属性，wx：elif属性等同于elif属性。

步骤104：获取层叠样式表文件中包含的多个样式规则。

在本申请实施例中，为了检测出待处理的层叠样式表文件中的冗余样式，可先获取该待处理的层叠样式表文件中所包含的样式规则。可以理解的是，通常情况下，层叠样式表文件中包含有多个样式规则。

作为一个实施例，可通过生成层叠样式表文件的抽象语法树获取层叠样式表文件中包含的多个样式规则。至于是如何生成层叠样式表文件的抽象语法树的，可参见上述对于生成第一抽象语法树的描述，这里不再详述。

步骤105：从多个样式规则中确定与至少一个第二抽象语法树相匹配的目标样式规则。

在本申请实施例中，样式规则与第二抽象语法树相匹配是指：第二抽象语法树中包含该样式规则的树结构。为了描述方便，以下将与至少一个第二抽象语法树相匹配的样式规则称为目标样式规则。

由于通过所有的第二抽象语法树才能够完整、准确地表示标记语言文件的结构，因此，在本步骤105中，可针对步骤104获取到的每一样式规则，检查步骤103获取到的每一个第二抽象语法树中是否包含该样式规则的树结构，如果任一第二抽象语法树中包含该样式规则的树结构，则可将该样式规则确定为与至少一个第二抽象语法树相匹配的目标样式规则。

作为一个实施例，可针对步骤104获取到的每一样式规则，遍历每一第二抽象语法树，以在遍历到的第二抽象语法树中查找包含该样式规则的树结构(以下称目标树结构)，若在任一第二抽象语法树中查找到目标树结构，则将该样式规则确定为目标样式规则。至于是如何在遍历到的第二抽象语法树中查找包含该样式规则的目标树结构的，在下文中通过图12所示实施例说明，这里先不做详述。

步骤106：基于目标样式规则生成目标层叠样式表文件。

由上述描述可知，目标样式规则为有效样式规则，步骤104获取到的多个样式规则中，除目标样式规则以外的样式规则均为无效的冗余样式规则，而冗余样式规则在标记语言文件中不具有有效显示，因此冗余样式规则没有存在于层叠样式表文件中的必要。

基于此，在本申请实施例中，可以基于目标样式规则生成新的层叠样式表文件(以下称目标层叠样式表文件)。这则意味着目标层叠样式表文件中不具有冗余样式规则，从而实现了删除待处理的层叠样式表文件中的冗余代码，缩小了网页文件的体积。

作为一个实施例，通过原始的层叠样式表文件的抽象语法树，并基于目标样式规则生成目标层叠样式表文件。

由上述实施例可见，通过在标记获取待处理的层叠样式表文件、以及层叠样式表文件对应的标记语言文件，生成标记语言文件的第一抽象语法树，在确定标记语言文件中包含动态元素时，对第一抽象语法树进行拆分，得到至少一个第二抽象语法树，获取层叠样式表文件中包含的多个样式规则，从多个样式规则中确定与至少一个第二抽象语法树相匹配的目标样式规则，基于目标样式规则生成目标层叠样式表文件，可以实现将层叠样式表文件中的冗余样式规则删除，从而缩减网页文件体积，进而提高网页文件加载速度。

进一步，在标记语言文件中包含动态元素的情况下，通过对标记语言文件的第一抽象语法树进行拆分，得到能够完整、准确表示标记语言文件结构的至少一个第二抽象语法树，之后基于该至少一个第二抽象语法树确定标记语言文件中的目标样式规则，即有效样式规则，则可以实现有效避免将有效样式规则错误识别为冗余样式规则。

在图2所示实施例的基础上，作为一个实施例，在标记语言文件中包含设置有if属性的元素的情况下，存在以下两种渲染结果：(1)当if条件为真时，对该元素进行渲染；(2)当if条件为假时，不对该元素进行渲染，因此，在标记语言文件中包含设置有if属性的元素的情况下，对第一抽象语法树进行拆分，得到至少一个第二抽象语法树，包括：将第一抽象语法树中包含if属性的树节点删除，得到一个第二抽象语法树；将第一抽象语法树作为另一个第二抽象语法树。

举例来说，如图4所示，为第一抽象语法树的一种示例。基于上述描述，将第一抽象语法树中包含if属性的树节点删除，则可得到图5所示例的第二抽象语法树。至此，通过对图4所示例的第一抽象语法树进行拆分，可得到图4和图5所示例的两个第二抽象语法树。

在图2所示实施例的基础上，作为一个实施例，在标记语言文件中包含设置有if属性的元素、以及设置有else属性的元素的情况下，存在以下两种渲染结果：(1)当if条件为真时，对设置有if属性的元素进行渲染；(2)当if条件为假时，对设置有else属性的元素进行渲染，由此可见，在同一时刻下，仅对设置有if属性的元素和设置有else属性的元素的其中一个进行渲染，因此，在标记语言文件中包含设置有if属性的元素、以及设置有else属性的元素的情况下，对第一抽象语法树进行拆分，得到至少一个第二抽象语法树，包括：将第一抽象语法树中包含if属性的树节点删除，得到第二抽象语法树；将第一抽象语法树中包含else属性的树节点删除，得到第二抽象语法树。

举例来说，对于图3所示例的第一抽象语法树，基于上述描述，将第一抽象语法树中包含if属性的树节点删除，则可得到图6(a)所示例的第二抽象语法树；将第一抽象语法树中包含else属性的树节点删除，则可得到图6(b)所示例的第二抽象语法树。至此，通过对图3所示例的第一抽象语法树进行拆分，可得到图6中所示例的2个第二抽象语法树。

在图2所示实施例的基础上，作为一个实施例，在标记语言文件中包含设置有if属性的元素、以及设置有elif属性的元素的情况下，存在以下3种渲染结果：(1)在if条件为真时，对设置有if属性的元素进行渲染；(2)在if条件为假，elif条件为真时，对设置有elif属性的元素进行渲染；(3)在if条件为假，elif条件也为假时，对设置有if属性的元素和设置有elif属性的元素均不进行渲染。因此，在标记语言文件中包含设置有if属性的元素、以及设置有elif属性的元素的情况下，对第一抽象语法树进行拆分，得到至少一个第二抽象语法树，包括：将第一抽象语法树中包含if属性的树节点删除，得到第二抽象语法树；将第一抽象语法树中包含elif属性的树节点删除，得到第二抽象语法树；将第一抽象语法树中包含if属性的树节点、以及包含elif属性的树节点删除，得到第二抽象语法树。

举例来说，如图7所示，为第一抽象语法树的又一种示例。基于上述描述，将第一抽象语法树中包含if属性的树节点删除，则可得到图8(a)所示例的第二抽象语法树；将第一抽象语法树中包含elif属性的树节点删除，则可得到图8(b)所示例的第二抽象语法树；将第一抽象语法树中包含if属性和elif属性的树节点删除，则可得到图8(c)所示例的第二抽象语法树。至此，通过对图7所示例的第一抽象语法树进行拆分，可得到图8中所示例的3个第二抽象语法树。

在图2所示实施例的基础上，作为一个实施例，在标记语言文件中包含设置有if属性的元素、设置有elif属性的元素，以及设置有else属性的元素的情况下，存在以下3种渲染结果：(1)在if条件为真时，对设置有if属性的元素进行渲染；(2)在elif条件为真时，对设置有elif属性的元素进行渲染；(3)在if条件为假，elif条件也为假时，对设置有else属性的元素进行渲染。因此，在标记语言文件中包含设置有if属性的元素、设置有elif属性的元素，以及设置有else属性的元素的情况下，对第一抽象语法树进行拆分，得到至少一个第二抽象语法树，包括：将第一抽象语法树中包含if属性的树节点、以及包含elif属性的树节点删除，得到第二抽象语法树；将第一抽象语法树中包含elif属性的树节点、以及包含else属性的树节点删除，得到第二抽象语法树；将第一抽象语法树中包含if属性的树节点、以及包含else属性的树节点删除，得到第二抽象语法树。

举例来说，如图9所示，为第一抽象语法树的再一种示例。基于上述描述，将第一抽象语法树中包含if属性的树节点、以及包含elif属性的树节点删除，则可得到图10(a)所示例的第二抽象语法树；将第一抽象语法树中包含elif属性的树节点、以及包含else属性的树节点删除，则可得到图10(b)所示例的第二抽象语法树；将第一抽象语法树中包含if属性的树节点、以及包含else属性的树节点删除，则可得到图10(c)所示例的第二抽象语法树。至此，通过对图9所示例的第一抽象语法树进行拆分，可得到图10中所示例的3个第二抽象语法树。

下面将结合附图以具体实施例对上述步骤105中如何在遍历到的第二抽象语法树中查找包含某一样式规则的树结构做进一步的解释说明，实施例并不构成对本申请实施例的限定。

参见图11，为本申请实施例提供的一种步骤105的实现流程，该流程包括以下步骤：

步骤1101、若样式规则中包含相邻兄弟样式选择器，则将相邻兄弟样式选择器中的最后一个确定为当前样式选择器。

步骤1102、在遍历到的第二抽象语法树中查找包含当前样式选择器的目标树节点；若未查找到目标树节点，则执行步骤1106；若查找到目标树节点，则执行步骤1103。

步骤1103、将当前样式选择器的前一个样式选择器确定为当前样式选择器，将目标树节点的前一个树节点确定为新的目标树节点。

步骤1104、确定新的目标树节点中是否包含当前样式选择器，若不包含，则执行步骤1106；若包含，则返回执行步骤1103，直至当前样式选择器不存在前一个样式选择器时，执行步骤1105。

步骤1105、确定在遍历到的第二抽象语法树中查找到包含样式规则的目标树结构。

步骤1106、确定在遍历到的第二抽象语法树中未查找到包含样式规则的目标树结构。

相邻兄弟选择器可选择紧接在另一个元素后的元素，且二者具有相同的父亲元素。比如，在上述步骤103的举例中，.first+.third这一样式规则包含.first和.third这两个相邻兄弟选择器。

以下结合图6对上述步骤1101至1106进行举例说明：

以.first+.third这一样式规则为例，按照上述步骤1101中的描述，将.third确定为当前样式选择器，假设当前遍历到图6(a)所示例的第二抽象结构树，按照上述步骤1102中的描述，在图6(a)所示例的第二抽象结构树中可以查找到包含当前样式选择器的目标树节点，继续执行步骤1103。按照上述步骤1103中的描述，将.first确定为当前样式选择器，将图6(a)中第二层左侧节点确定为新的目标树节点，继续执行步骤1104。按照步骤1104中的描述，确定新的目标树节点中包含的是.second这一样式选择器，并非包含当前样式选择器.first。至此，执行步骤1106，确定在图6(a)所示例的第二抽象语法树中未查找到包含.first+.third这一样式规则的目标树结构。

继续假设当前遍历到图6(b)所示例的第二抽象结构树，按照上述步骤1102中的描述，在图6(b)所示例的第二抽象结构树中可以查找到包含当前样式选择器的目标树节点，继续执行步骤1103。按照上述步骤1103中的描述，将.first确定为当前样式选择器，将图6(b)中第二层左侧节点确定为新的目标树节点，继续执行步骤1104。按照步骤1104中的描述，确定新的目标树节点中包含当前样式选择器.first。至此，执行步骤1105，确定在图6(b)所示例的第二抽象语法树中查找到包含.first+.third这一样式规则的目标树结构。

通过图11所示流程，实现了在样式规则中包含相邻兄弟样式选择器的情况下，在标记语言文件对应的第二抽象语法树中查找包含该样式规则的树结构，以根据查找结果确定该样式规则是否为冗余样式规则。

与前述层叠样式表文件的处理方法的实施例相对应，本申请还提供层叠样式表文件的处理装置的实施例。

参见图12，为本申请实施例提供的一种层叠样式表文件的处理装置的实施例框图，该装置包括：文件获取模块121、树生成模块122、样式获取模块123、样式匹配模块124，以及文件生成模块125。

其中，文件获取模块121，用于获取待处理的层叠样式表文件、以及所述层叠样式表文件对应的标记语言文件；

树生成模块122，用于生成所述标记语言文件的第一抽象语法树，以及在确定所述标记语言文件中包含动态元素时，对所述第一抽象语法树进行拆分，得到至少一个第二抽象语法树；

样式获取模块123，用于获取所述层叠样式表文件中包含的多个样式规则；

样式匹配模块124，用于从所述多个样式规则中确定与至少一个所述第二抽象语法树相匹配的目标样式规则；

文件生成模块125，用于基于所述目标样式规则生成目标层叠样式表文件。

在一可能的实施方式中，所述树生成模块122确定所述标记语言文件中包含动态元素，包括：

若所述标记语言文件中包含设置有控制属性的元素，则将所述设置有控制属性的元素确定为动态元素；所述控制属性至少包括：if属性、else属性、elif属性。

在一个可能的实施方式中，所述树生成模块122对第一抽象语法树进行拆分，得到至少一个第二抽象语法树，包括：

在所述标记语言文件中包含设置有if属性的元素的情况下，获取所述第二抽象语法树至少包括以下一种：

将所述第一抽象语法树中包含if属性的树节点删除，得到第二抽象语法树；

将所述第一抽象语法树作为一个所述第二抽象语法树。

在一个可能的实施方式中，所述树生成模块122对第一抽象语法树进行拆分，得到至少一个第二抽象语法树，包括：

在所述标记语言文件中包含设置有if属性的元素、以及设置有else属性的元素的情况下，获取所述第二抽象语法树至少包括以下一种：

将所述第一抽象语法树中包含if属性的树节点删除，得到第二抽象语法树；

将所述第一抽象语法树中包含else属性的树节点删除，得到第二抽象语法树。

在一个可能的实施方式中，所述树生成模块122对第一抽象语法树进行拆分，得到至少一个第二抽象语法树，包括：

在所述标记语言文件中包含设置有if属性的元素、以及设置有elif属性的元素的情况下，获取所述第二抽象语法树至少包括以下一种：

将所述第一抽象语法树中包含if属性的树节点删除，得到第二抽象语法树；

将所述第一抽象语法树中包含elif属性的树节点删除，得到第二抽象语法树；

将所述第一抽象语法树中包含if属性的树节点、以及包含elif属性的树节点删除，得到第二抽象语法树。

在一个可能的实施方式中，所述树生成模块122对第一抽象语法树进行拆分，得到至少一个第二抽象语法树，包括：

在所述标记语言文件中包含设置有if属性的元素、设置有elif属性的元素，以及设置有else属性的元素的情况下，获取所述第二抽象语法树至少包括以下一种：

将所述第一抽象语法树中包含if属性的树节点、以及包含elif属性的树节点删除，得到第二抽象语法树；

将所述第一抽象语法树中包含elif属性的树节点、以及包含else属性的树节点删除，得到第二抽象语法树；

将所述第一抽象语法树中包含if属性的树节点、以及包含else属性的树节点删除，得到第二抽象语法树。

在一个可能的实施方式中，所述样式匹配模块124从多个样式规则中确定与至少一个所述第二抽象语法树相匹配的目标样式规则，包括：

针对每一所述样式规则，遍历每一所述第二抽象语法树，以在遍历到的所述第二抽象语法树中查找包含所述样式规则的目标树结构；

若在任一所述第二抽象语法树中查找到所述目标树结构，则将所述样式规则确定为目标样式规则。

在一个可能的实施方式中，所述样式匹配模块124在遍历到的所述第二抽象语法树中查找包含所述样式规则的目标树结构，包括：

若所述样式规则中包含相邻兄弟样式选择器，则将所述相邻兄弟样式选择器中的最后一个确定为当前样式选择器；

在遍历到的所述第二抽象语法树中查找包含所述当前样式选择器的目标树节点；

若未查找到所述目标树节点，则确定在遍历到的所述第二抽象语法树中未查找到包含所述样式规则的目标树结构；

若查找到所述目标树节点，则将当前样式选择器的前一个样式选择器确定为当前样式选择器，将目标树节点的前一个树节点确定为新的目标树节点，并确定新的目标树节点中是否包含所述当前样式选择器；

若不包含，确定在遍历到的所述第二抽象语法树中未查找到包含所述样式规则的目标树结构；

若包含，则返回所述将当前样式选择器的前一个样式选择器确定为当前样式选择器的步骤，直至当前样式选择器不存在前一个样式选择器时，确定在遍历到的所述第二抽象语法树中查找到包含所述样式规则的目标树结构。

本申请实施例还提供了一种电子设备，如图13所示，包括处理器1301、通信接口1302、存储器1303和通信总线1304，其中，处理器1301，通信接口1302，存储器1303通过通信总线1304完成相互间的通信，

存储器1303，用于存放计算机程序；

处理器1301，用于执行存储器1303上所存放的程序时，实现如下步骤：

获取待处理的层叠样式表文件、以及所述层叠样式表文件对应的标记语言文件；

生成所述标记语言文件的第一抽象语法树，以及在确定所述标记语言文件中包含动态元素时，对所述第一抽象语法树进行拆分，得到至少一个第二抽象语法树；

获取所述层叠样式表文件中包含的多个样式规则；

从所述多个样式规则中确定与至少一个所述第二抽象语法树相匹配的目标样式规则；

基于所述目标样式规则生成目标层叠样式表文件。

上述服务器提到的通信总线可以是外设部件互连标准(peripheralcomponentinterconnect，简称pci)总线或扩展工业标准结构(extendedindustrystandardarchitecture，简称eisa)总线等。该通信总线可以分为地址总线、数据总线、控制总线等。为便于表示，图中仅用一条粗线表示，但并不表示仅有一根总线或一种类型的总线。

通信接口用于上述服务器与其他设备之间的通信。

存储器可以包括随机存取存储器(randomaccessmemory，简称ram)，也可以包括非易失性存储器(non-volatilememory)，例如至少一个磁盘存储器。可选的，存储器还可以是至少一个位于远离前述处理器的存储装置。

上述的处理器可以是通用处理器，包括中央处理器(centralprocessingunit，简称cpu)、网络处理器(networkprocessor，简称np)等；还可以是数字信号处理器(digitalsignalprocessing，简称dsp)、专用集成电路(applicationspecificintegratedcircuit，简称asic)、现场可编程门阵列(field－programmablegatearray，简称fpga)或者其他可编程逻辑器件、分立门或者晶体管逻辑器件、分立硬件组件。

在本申请提供的又一实施例中，还提供了一种存储介质，该存储介质中存储有指令，当其在计算机上运行时，使得计算机执行上述实施例中任一所述的层叠样式表文件的处理方法。

在本申请提供的又一实施例中，还提供了一种计算机程序产品或计算机程序，该计算机程序产品或计算机程序包括计算机指令，该计算机指令存储在计算机可读存储介质中。电子设备的处理器从计算机可读存储介质读取该计算机指令，处理器执行该计算机指令，使得该电子设备执行上述实施例中任一所述的层叠样式表文件的处理方法。

在上述实施例中，可以全部或部分地通过软件、硬件、固件或者其任意组合来实现。当使用软件实现时，可以全部或部分地以计算机程序产品的形式实现。所述计算机程序产品包括一个或多个计算机指令。在计算机上加载和执行所述计算机程序指令时，全部或部分地产生按照本申请实施例所述的流程或功能。所述计算机可以是通用计算机、专用计算机、计算机网络、或者其他可编程装置。所述计算机指令可以存储在存储介质中，或者从一个存储介质向另一个存储介质传输，例如，所述计算机指令可以从一个网站站点、计算机、服务器或数据中心通过有线(例如同轴电缆、光纤、数字用户线(dsl))或无线(例如红外、无线、微波等)方式向另一个网站站点、计算机、服务器或数据中心进行传输。所述存储介质可以是计算机能够存取的任何可用介质或者是包含一个或多个可用介质集成的服务器、数据中心等数据存储设备。所述可用介质可以是磁性介质，(例如，软盘、硬盘、磁带)、光介质(例如，dvd)、或者半导体介质(例如固态硬盘solidstatedisk(ssd))等。

需要说明的是，在本文中，诸如第一和第二等之类的关系术语仅仅用来将一个实体或者操作与另一个实体或操作区分开来，而不一定要求或者暗示这些实体或操作之间存在任何这种实际的关系或者顺序。而且，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者设备所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括所述要素的过程、方法、物品或者设备中还存在另外的相同要素。

本说明书中的各个实施例均采用相关的方式描述，各个实施例之间相同相似的部分互相参见即可，每个实施例重点说明的都是与其他实施例的不同之处。尤其，对于系统实施例而言，由于其基本相似于方法实施例，所以描述的比较简单，相关之处参见方法实施例的部分说明即可。

以上所述仅为本申请的较佳实施例而已，并非用于限定本申请的保护范围。凡在本申请的精神和原则之内所作的任何修改、等同替换、改进等，均包含在本申请的保护范围内。