CN104965866B - 一种建立标签与样式规则绑定关系的方法和装置 - Google Patents

Abstract

本公开是关于一种建立标签与样式规则绑定关系的方法和装置，属于计算机技术领域。所述方法包括：获取待匹配的HTML文件和CSS文件；根据所述CSS文件中的各选择器所包含的原子选择器，将所述各选择器划分为多个选择器分类；遍历所述HTML文件中标签，对于每个遍历到的标签，如果根据其包含的标签名、标签属性和对应的属性值，确定在所述多个选择器分类中存在其对应的第一选择器分类，则在所述第一选择器分类所包含的选择器中，查找与所述遍历到的标签相匹配的第一选择器，并建立所述遍历到的标签与所述第一选择器所属样式规则的绑定关系。采用本公开，可以提高标签与样式规则的匹配效率。

Description

一种建立标签与样式规则绑定关系的方法和装置

技术领域

本公开是关于计算机技术领域，尤其是关于一种建立标签与样式规则绑定关系的方法和装置。

背景技术

随着计算机技术的发展，各类的终端得到了广泛的普及，成为了人们获取信息的重要工具。网页、电子文档等是信息的主要载体，一个网页或电子文档(如电子书)可以由HTML(Hyper Text Mark-up Language，超文本标记语言)文件与CSS(Cascading StyleSheets，级联样式表)文件组成。

HTML文件是由多个标签组成，用于提供网页或电子文档的具体内容，CSS文件是由多个样式规则构成，每一个样式规则由样式选择器(或称选择器)和样式声明组成，其中，选择器用于决定样式规则是针对HTML文件中的哪些标签，样式声明用于决定相应的标签的显示样式。在网页或电子文档的加载过程中需要进行HTML文件内容与CSS文件内容的匹配过程，即标签与样式规则的匹配过程，以确定HTML文件每个标签对应的样式规则，以进行后续的显示。

现有的标签与样式规则的匹配过程是：获取HTML文件关联的CSS文件，生成CSS文件内的所有样式规则的线性列表，遍历HTML文件中的标签，针对遍历到的每一个标签顺序查阅线性列表，找到与该标签匹配的所有样式规则。

在实现本公开的过程中，发明人发现至少存在以下问题：

基于上述的标签与样式规则的匹配过程，遍历HTML文件中的标签时，对于其中的每一个标签都是顺序查阅线性列表中的所有的样式规则，往往HTML文件中标签的数目以及CSS文件中样式规则的数目都比较大，导致标签与样式规则的匹配效率较低。

发明内容

为了克服相关技术中存在的问题，本公开提供了一种建立标签与样式规则绑定关系的方法和装置。所述技术方案如下：

根据本公开实施例的第一方面，提供一种建立标签与样式规则绑定关系的方法，所述方法包括：

获取待匹配的HTML文件和CSS文件；

根据所述CSS文件中的各选择器所包含的原子选择器，将所述各选择器划分为多个选择器分类；

遍历所述HTML文件中标签，对于每个遍历到的标签，如果根据其包含的标签名、标签属性和对应的属性值，确定在所述多个选择器分类中存在其对应的第一选择器分类，则在所述第一选择器分类所包含的选择器中，查找与所述遍历到的标签相匹配的第一选择器，并建立所述遍历到的标签与所述第一选择器所属样式规则的绑定关系。

可选的，所述根据所述CSS文件中的各选择器所包含的原子选择器，将所述各选择器划分为多个选择器分类，包括：

根据所述CSS文件中的各选择器的第一级简单选择器所包含的原子选择器，将所述各选择器划分为多个选择器分类。

可选的，所述根据所述CSS文件中的各选择器的第一级简单选择器所包含的原子选择器，将所述各选择器划分为多个选择器分类，包括：

根据所述CSS文件中的各选择器的第一级简单选择器所包含的元素选择器对应的标签名，将所述各选择器划分为多个选择器分类。

可选的，所述根据所述CSS文件中的各选择器的第一级简单选择器所包含的原子选择器，将所述各选择器划分为多个选择器分类，包括：

根据所述CSS文件中的各选择器的第一级简单选择器所包含的元素选择器对应的标签名和包含的非元素选择器对应的标签属性、属性值，将所述各选择器划分为多个选择器分类。

可选的，所述方法还包括：

如果所述遍历到的标签与多个样式规则建立绑定关系，则根据所述多个样式规则中每个样式规则的选择器的顺序信息和/或权重信息，在所述多个样式规则中选取目标样式规则，取消所述目标样式规则之外的其它样式规则与所述遍历到的标签的绑定关系。

根据本公开实施例的第二方面，提供一种建立标签与样式规则绑定关系的装置，所述装置包括：

获取模块，用于获取待匹配的HTML文件和CSS文件；

分类模块，用于根据所述CSS文件中的各选择器所包含的原子选择器，将所述各选择器划分为多个选择器分类；

绑定模块，用于遍历所述HTML文件中标签，对于每个遍历到的标签，如果根据其包含的标签名、标签属性和对应的属性值，确定在所述多个选择器分类中存在其对应的第一选择器分类，则在所述第一选择器分类所包含的选择器中，查找与所述遍历到的标签相匹配的第一选择器，并建立所述遍历到的标签与所述第一选择器所属样式规则的绑定关系。

可选的，所述分类模块，用于：

根据所述CSS文件中的各选择器的第一级简单选择器所包含的原子选择器，将所述各选择器划分为多个选择器分类。

可选的，所述分类模块，用于：

根据所述CSS文件中的各选择器的第一级简单选择器所包含的元素选择器对应的标签名，将所述各选择器划分为多个选择器分类。

可选的，所述分类模块，用于：

根据所述CSS文件中的各选择器的第一级简单选择器所包含的元素选择器对应的标签名和包含的非元素选择器对应的标签属性、属性值，将所述各选择器划分为多个选择器分类。

可选的，所述装置还包括取消模块，用于：

如果所述遍历到的标签与多个样式规则建立绑定关系，则根据所述多个样式规则中每个样式规则的选择器的顺序信息和/或权重信息，在所述多个样式规则中选取目标样式规则，取消所述目标样式规则之外的其它样式规则与所述遍历到的标签的绑定关系。

根据本公开实施例的第三方面，提供一种建立标签与样式规则绑定关系的装置，包括：

处理器；

用于存储处理器可执行指令的存储器；

其中，所述处理器被配置为：

获取待匹配的HTML文件和CSS文件；

根据所述CSS文件中的各选择器所包含的原子选择器，将所述各选择器划分为多个选择器分类；

遍历所述HTML文件中标签，对于每个遍历到的标签，如果根据其包含的标签名、标签属性和对应的属性值，确定在所述多个选择器分类中存在其对应的第一选择器分类，则在所述第一选择器分类所包含的选择器中，查找与所述遍历到的标签相匹配的第一选择器，并建立所述遍历到的标签与所述第一选择器所属样式规则的绑定关系。

本公开的实施例提供的技术方案可以包括以下有益效果：

本公开实施例中，本公开实施例中，获取待匹配的HTML文件和CSS文件，根据所述CSS文件中的各选择器所包含的原子选择器，将所述各选择器划分为多个选择器分类，遍历所述HTML文件中标签，对于每个遍历到的标签，如果根据其包含的标签名、标签属性和对应的属性值，确定在所述多个选择器分类中存在其对应的第一选择器分类，则在所述第一选择器分类所包含的选择器中，查找与所述遍历到的标签相匹配的第一选择器，并建立所述遍历到的标签与所述第一选择器所属样式规则的绑定关系。这样，终端可以根据遍历到的标签的信息，在多个选择器分类中确定该标签对应的选择器分类，再在此分类中查找标签所匹配的选择器，无需顺序查阅所有的选择器，提高了标签与样式规则的匹配效率。

应当理解的是，以上的一般描述和后文的细节描述仅是示例性和解释性的，并不能限制本公开。

附图说明

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

图1是根据一示例性实施例示出的一种建立标签与样式规则绑定关系的方法流程图；

图2是根据一示例性实施例示出的一种选择器分类示意图；

图3是根据一示例性实施例示出的一种建立标签与样式规则绑定关系的装置结构示意图；

图4是根据一示例性实施例示出的一种建立标签与样式规则绑定关系的装置结构示意图；

图5是根据一示例性实施例示出的一种终端的结构示意图。

通过上述附图，已示出本公开明确的实施例，后文中将有更详细的描述。这些附图和文字描述并不是为了通过任何方式限制本公开构思的范围，而是通过参考特定实施例为本领域技术人员说明本公开的概念。

具体实施方式

这里将详细地对示例性实施例进行说明，其示例表示在附图中。下面的描述涉及附图时，除非另有表示，不同附图中的相同数字表示相同或相似的要素。以下示例性实施例中所描述的实施方式并不代表与本公开相一致的所有实施方式。相反，它们仅是与如所附权利要求书中所详述的、本公开的一些方面相一致的装置和方法的例子。

实施例一

本公开实施例提供了一种建立标签与样式规则绑定关系的方法，如图1所示，该方法的处理流程可以包括如下的步骤：

在步骤101中，获取待匹配的HTML文件和CSS文件。

在步骤102中，根据CSS文件中的各选择器所包含的原子选择器，将各选择器划分为多个选择器分类。

在步骤103中，遍历HTML文件中标签，对于每个遍历到的标签，如果根据其包含的标签名、标签属性和对应的属性值，确定在多个选择器分类中存在其对应的第一选择器分类，则在第一选择器分类所包含的选择器中，查找与遍历到的标签相匹配的第一选择器，并建立遍历到的标签与第一选择器所属样式规则的绑定关系。

本公开实施例中，获取待匹配的HTML文件和CSS文件，根据所述CSS文件中的各选择器所包含的原子选择器，将所述各选择器划分为多个选择器分类，遍历所述HTML文件中标签，对于每个遍历到的标签，如果根据其包含的标签名、标签属性和对应的属性值，确定在所述多个选择器分类中存在其对应的第一选择器分类，则在所述第一选择器分类所包含的选择器中，查找与所述遍历到的标签相匹配的第一选择器，并建立所述遍历到的标签与所述第一选择器所属样式规则的绑定关系。这样，终端可以根据遍历到的标签的信息，在多个选择器分类中确定该标签对应的选择器分类，再在此分类中查找标签所匹配的选择器，无需顺序查阅所有的选择器，提高了标签与样式规则的匹配效率。

实施例二

本公开实施例提供了一种建立标签与样式规则绑定关系的方法，该方法可以用于终端中，其中，终端可以是移动终端比如手机、平板电脑等，也可以是PC端。

下面将结合实施方式，对图1所示的处理流程进行详细的说明，内容可以如下：

在步骤101中，获取待匹配的HTML文件和CSS文件。

其中，HTML文件是一种包含多种标签的文本，HTML的结构包含“头”部分(英语：Head)和“主体”部分(英语：Body)，其中“头”部分可以提供与HTML文件相关联的CSS文件的信息，“主体”部分提供网页的具体内容，CSS文件是一种包含多个样式规则的文本，是由选择器和样式声明组成，其中，选择器用于决定样式规则是针对HTML文件中的哪些标签，样式声明用于决定相应的标签的显示样式，CSS文件中可以记载HTML文件中的内容的文字的颜色、字体、字号以及行间距等等，例如，p.sub-note{font-family:楷体}，大括号前的p.sub-note为选择器，即HTML文件中类(class)属性为sub-note且标签名为p的标签都会匹配该样式规则，大括号内的内容为样式声明，该样式声明规定已匹配的标签内的文字采用楷体的字体。

在实施中，对于网页或者由HTML文件和CSS文件组成的电子文档(比如EPUB电子书)等，终端需要对其中的HTML文件和CSS文件进行编译，用户所看到的内容即是终端对HTML文件和CSS文件进行编译并显示的结果，其中需要进行HTML文件中的标签和CSS文件中的样式规则的匹配。下文将讲述HTML文件中的标签与CSS文件中的样式规则的匹配过程。

终端读入HTML文件，建立HTML文件中标签的树型结构，根据在HTML文件中的Head部分的link节点的内容，寻找该HTML文件关联的CSS文件，寻找到CSS文件后，读入CSS文件，生成CSS文件内的所有样式规则的线性列表，线性列表中包含CSS文件中的用于与HTML文件中的标签匹配的所有选择器以及对应的样式声明，同时还可以记录各选择器的权重和各选择器在线性列表中出现的顺序。

在步骤102中，根据CSS文件中的各选择器所包含的原子选择器，将各选择器划分为多个选择器分类。

其中，原子选择器是选择器的最小单元，也可以称为最简单的选择器，一般是仅需要标签中的一类信息就能完成与HTML文件中的标签匹配的选择器，原子选择器可分为：通配选择器(*或无)、元素选择器(如p)、类(class)选择器(如.note)、ID(Identification，身份标识号)选择器(如#mynote)、属性选择器(如[lang＝"en"])和伪类选择器(如:active)，除元素选择器之外的五个选择器可以称为是非元素选择器，其中，通配选择器和伪类选择器可以用于任意标签，元素选择器用于指定标签的标签名，类选择器用于指定标签的类属性的属性值，ID选择器用于指定标签的ID属性的属性值，属性选择器用于指定标签除类属性、ID属性之外的其他属性以及对应的属性值。另外，还有简单选择器，简单选择器是由一个或多个原子选择器组成并且不包含连接符的选择器。相应的还有复杂选择器，是由简单选择器通过连接符连接而成的选择器，连接符包括：后代连接符(可以为空格)、父子连接符(可以为'>')、兄弟连接符(可以为'+')和相邻兄弟连接符(可以为'～')，例如，div.image-block>p.main-note～p.sub-note是由简单选择器通过连接符连接而成的复杂选择器。

在实施中，生成CSS文件中的样式规则的线性列表后，线性列表中的各选择器可以是简单选择器，也可以是复杂选择器，可以根据线性列表中的各选择器中包含的原子选择器的不同，将其中的各选择器进行分类，划分为多个不同的选择器分类，进而，可以对应每个选择器分类存储属于该选择器分类的选择器所属的样式规则。

可选的，可以根据各选择器的最右边的简单选择器进行分类，相应的，步骤102的处理可以如下：根据CSS文件中的各选择器的第一级简单选择器所包含的原子选择器，将各选择器划分为多个选择器分类。

其中，以生成的线性列表中的各选择器使用的连接符将选择器分割为多个简单选择器，第一级简单选择器可以是分割得到的各简单选择器中最右边的简单选择器，对于不包含连接符的选择器来讲，其第一级简单选择器就是其本身，例如，选择器div.image-block>p.main-note～p.sub-note的第一级简单选择器是p.sub-note，而div.text-block的第一级选择器就是其本身。

在实施中，针对线性列表中的各选择器，终端获取其中的第一级简单选择器，根据第一级简单选择器中包含的原子选择器，对线性列表中的各选择器进行分类，划分为多个不同的选择器分类，进而，可以对应每个选择器分类存储属于该选择器分类的选择器所属的样式规则。

可选的，基于分类所根据的信息不同，分类的方式可以多种多样，以下给出了几种可行的分类方式：

方式一，根据元素选择器对应的标签名分类，相应的处理如下：根据CSS文件中的各选择器的第一级简单选择器所包含的元素选择器对应的标签名，将各选择器划分为多个选择器分类。

在实施中，终端获取到线性列表中的各选择器的第一级简单选择器后，可以获知第一级简单选择器所包含的原子选择器，可以判断第一级简单选择器中是否包含元素选择器，若不包含元素选择器，则可以将该第一级简单选择器对应的样式规则存储在无元素类中，若第一级简单选择器包含元素选择器，则进一步判断元素选择器对应的标签名，将不同的标签名分为不同的类，类的名称可以由标签名决定，例如若元素选择器为p，则其对应的标签名为p，则可以将其称为p类，若元素选择器为div，则其对应的标签名为div，则可以将其称为div类等等，并且可以对应每个选择器分类存储属于该选择器分类的选择器所属的样式规则。

方式二，根据标签名、标签属性以及属性值分类，相应的处理可以如下：根据CSS文件中的各选择器的第一级简单选择器所包含的元素选择器对应的标签名和包含的非元素选择器对应的标签属性、属性值，将各选择器划分为多个选择器分类。

其中，标签属性可以是类(class)属性、ID属性以及除类(class)属性、ID属性之外的其他属性，其中，类属性对应于类选择器，ID属性对应于ID选择器，其他属性对应于属性选择器。属性值可以是标签中某项标签属性对应的值，例如，原子选择器“.text-block”是一个非元素选择器，其对应的标签属性为类属性，对应的属性值为text-block。

在实施中，如果多个选择器，他们的第一级简单选择器所包含的元素选择器对应的标签名相同，且他们的第一级简单选择器所包含的非元素选择器对应的标签属性和属性值也相同，则将此多个选择器分为一类。另外，如果多个选择器的第一级简单选择器中不包含元素选择器，则可以认为这些第一级简单选择器所对应的标签名相同，均为空。

在处理流程中，终端获取到线性列表中的某个选择器的第一级简单选择器后，可以记录该第一级简单选择器中所包含的元素选择器对应的标签名，如果不包含元素选择器，可以记录标签名为空，将标签名作为第一级分类的分类标识，进一步可以判断该第一级简单选择器中包含的非元素选择器是否为通配选择器，若是，则将通配属性记录为第二级分类的分类标识，对该选择器的分类结束，若不是，则可以继续判断第一级简单选择器中包含的非元素选择器是否是class选择器，若是，则将class属性和class属性值记录为第二级分类的分类标识，对该选择器的分类结束，若不是，则可以继续判断第一级简单选择器中包含的非元素选择器是否是ID选择器，若是，则将ID属性和ID属性值记录为第二级分类的分类标识，对该选择器的分类结束，若不是，则可以继续判断第一级简单选择器中包含的非元素选择器是否是伪类选择器，若是，则将伪类属性记录为第二级分类的分类标识，对于该选择器的分类结束，若不是，则将其他属性记录为第二级分类的分类标识(其他属性即是属性选择器对应的属性)对该选择器的分类结束。分类示意图可以如图2所示。

在步骤103中，遍历HTML文件中标签，对于每个遍历到的标签，如果根据其包含的标签名、标签属性和对应的属性值，确定在多个选择器分类中存在其对应的第一选择器分类，则在第一选择器分类所包含的选择器中，查找与遍历到的标签相匹配的第一选择器，并建立遍历到的标签与第一选择器所属样式规则的绑定关系。

在实施中，遍历HTML文件中的标签，对于遍历到的某个标签，可以根据标签的标签名，确定其对应的选择器的第一级分类。在所有第一级分类中，选取分类标识与当前标签的标签名相同的第一级分类，以及分类标识为空的第一级分类，如果在所有的第一级分类中不存在分类标识与当前标签的标签名相同的第一级分类和分类标识为空的第一级分类，则认为没有与该标签相匹配的样式规则；如果存在分类标识与当前标签的标签名相同的第一级分类，以及分类标识为空的第一级分类，对于选取的每个第一级分类，在其包含的第二级分类中，获取分类标识与当前标签的任一标签属性相匹配的第二级分类。在获取出的分类标识与当前标签的任一标签属性相匹配的第二级分类中，针对分类标识为class属性和ID属性的情况，进一步获取分类标识与当前标签的任一标签属性对应的属性值也匹配的第二级分类，如果某一类的属性值不匹配，则认为这一类没有与该标签相匹配的选择器，如果属性值匹配，则可以在其包含的第二级分类中查找对应的选择器。在获取出的分类标识与当前标签的任一标签属性相匹配的第二级分类中，针对分类标识为通配属性、伪类属性和其他属性的情况，可以在其包含的第二级分类中查找对应的选择器。

在第二级分类中查找对应的选择器的处理可以如下：在第二级分类中查找到的对应的选择器如果是简单选择器则认为该标签与该选择器相匹配，建立该标签与选择器所属样式规则的绑定关系，若该选择器是复杂选择器，则可以判断该标签是否存在父标签或兄弟标签，若不存在，则匹配失败，若存在，则可以按照复杂选择器的处理过程进行匹配，其过程可以如下：可以获取选择器最右的连接符以及连接符左边的简单选择器，若当前遍历到的标签存在该连接符指向的这种关系的标签，并且该标签具有连接符左边的简单选择器所指向的信息(信息可以是标签名、标签属性及其对应的属性值)，则判定与该简单选择器成功，否则匹配失败，不再进行后续处理，按照相同的方式依次向左进行匹配，直到复杂选择器中最左侧的简单选择器匹配成功后，当前遍历到的该标签与该复杂选择器匹配成功，并建立该标签与选择器所属样式规则的绑定关系。对于复杂选择器的处理过程举例说明，例如，复杂选择器为div.image-block>p.main-note～p.sub-note，对于当前遍历到的标签Tag而言，他们的匹配判定过程如下：

a、对选择器按照连接符分割为div.image-block、p.main-not、p.sub-note三个简单选择器。

b、取第一级简单选择器(即最右的简单选择器)与标签Tag进行匹配判定，若标签Tag的标签名为p且存在class＝"sub-note"的属性则执行步骤c，否则匹配失败。

c、取第一级连接符(即最右的连接符)选择用于匹配的标签，根据连接符'～'选择标签Tag相邻的先前兄弟标签(可记为AdjacentSibling(Tag))，若标签选取成功则执行步骤d，否则失败。

d、取第二级简单选择器(即最右的连接符左边的简单选择器)进行匹配判定，若标签AdjacentSibling(Tag)的标签名为p且存在class＝"main-note"的属性则执行步骤e，否则失败。

e、取第二级连接符(即第二级简单选择器左边的连接符)选择用于匹配的标签，根据连接符'>'选择AdjacentSibling(Tag)的父节点(记为Parent(AdjacentSibling(Tag)))，若标签选取成功则执行步骤f，否则失败。

f、取第三级简单选择器(即第二级连接符左边的简单选择器)进行匹配判定，若标签Parent(AdjacentSibling(Tag))的标签名为div且存在class＝'image-block'的属性则匹配成功，否则匹配失败，结束。

可选的，针对与某个标签建立绑定关系的多个样式规则中的样式声明冲突的情况，相应的，处理流程可以如下：如果遍历到的标签与多个样式规则建立绑定关系，则根据多个样式规则中每个样式规则的选择器的顺序信息和权重信息，在多个样式规则中选取目标样式规则，取消目标样式规则之外的其它样式规则与所述遍历到的标签的绑定关系。

在实施中，遍历的标签可能会与多个样式规则建立绑定关系，其中的样式声明对于该标签可能存在着冲突，例如，其中的某个样式声明规定已匹配的标签内的文字的字体采用楷体的字体，其中的另一个样式声明规定该标签内的文字的字体采用宋体的字体，终端可以获取多个样式规则中每个样式规则的选择器的顺序信息和权重信息，比较发生冲突的样式声明对应的样式规则中的选择器的权重，选取权重大的选择器对应的样式规则为目标样式规则，若选择器的权重相同，则可以选取先出现的选择器对应的样式规则为目标样式规则，选取目标样式规则后，取消与该标签已建立绑定关系的其它的样式规则与该标签的绑定关系。

HTML文件中的标签与其关联的CSS文件中的样式规则建立绑定关系后，终端在显示相应的网页或电子文档的过程中，可以基于每个标签绑定的样式规则对标签的内容进行显示。

本公开实施例中，获取待匹配的HTML文件和CSS文件，根据所述CSS文件中的各选择器所包含的原子选择器，将所述各选择器划分为多个选择器分类，遍历所述HTML文件中标签，对于每个遍历到的标签，如果根据其包含的标签名、标签属性和对应的属性值，确定在所述多个选择器分类中存在其对应的第一选择器分类，则在所述第一选择器分类所包含的选择器中，查找与所述遍历到的标签相匹配的第一选择器，并建立所述遍历到的标签与所述第一选择器所属样式规则的绑定关系。这样，终端可以根据遍历到的标签的信息，在多个选择器分类中确定该标签对应的选择器分类，再在此分类中查找标签所匹配的选择器，无需顺序查阅所有的选择器，提高了标签与样式规则的匹配效率。

实施例三

本公开实施例还提供了一种建立标签与样式规则绑定关系的装置，如图3所示，该装置包括：获取模块310，分类模块320和绑定模块330。

获取模块310，用于获取待匹配的HTML文件和CSS文件；

分类模块320，用于根据所述CSS文件中的各选择器所包含的原子选择器，将所述各选择器划分为多个选择器分类；

绑定模块330，用于遍历所述HTML文件中标签，对于每个遍历到的标签，如果根据其包含的标签名、标签属性和对应的属性值，确定在所述多个选择器分类中存在其对应的第一选择器分类，则在所述第一选择器分类所包含的选择器中，查找与所述遍历到的标签相匹配的第一选择器，并建立所述遍历到的标签与所述第一选择器所属样式规则的绑定关系。

可选的，所述分类模块320，用于：

根据所述CSS文件中的各选择器的第一级简单选择器所包含的原子选择器，将所述各选择器划分为多个选择器分类。

可选的，所述分类模块320，用于：

根据所述CSS文件中的各选择器的第一级简单选择器所包含的元素选择器对应的标签名，将所述各选择器划分为多个选择器分类。

可选的，所述分类模块320，用于：

根据所述CSS文件中的各选择器的第一级简单选择器所包含的元素选择器对应的标签名和包含的非元素选择器对应的标签属性、属性值，将所述各选择器划分为多个选择器分类。

可选的，如图4所示，所述装置还包括取消模块340，用于：

如果所述遍历到的标签与多个样式规则建立绑定关系，则根据所述多个样式规则中每个样式规则的选择器的顺序信息和/或权重信息，在所述多个样式规则中选取目标样式规则，取消所述目标样式规则之外的其它样式规则与所述遍历到的标签的绑定关系。

关于上述实施例中的装置，其中各个模块执行操作的具体方式已经在有关该方法的实施例中进行了详细描述，此处将不做详细阐述说明。

本公开实施例中，获取待匹配的HTML文件和CSS文件，根据所述CSS文件中的各选择器所包含的原子选择器，将所述各选择器划分为多个选择器分类，遍历所述HTML文件中标签，对于每个遍历到的标签，如果根据其包含的标签名、标签属性和对应的属性值，确定在所述多个选择器分类中存在其对应的第一选择器分类，则在所述第一选择器分类所包含的选择器中，查找与所述遍历到的标签相匹配的第一选择器，并建立所述遍历到的标签与所述第一选择器所属样式规则的绑定关系。这样，终端可以根据遍历到的标签的信息，在多个选择器分类中确定该标签对应的选择器分类，再在此分类中查找标签所匹配的选择器，无需顺序查阅所有的选择器，提高了标签与样式规则的匹配效率。

需要说明的是：上述实施例提供的建立标签与样式规则绑定关系的装置在建立标签与样式规则绑定关系时，仅以上述各功能模块的划分进行举例说明，实际应用中，可以根据需要而将上述功能分配由不同的功能模块完成，即将设备的内部结构划分成不同的功能模块，以完成以上描述的全部或者部分功能。另外，上述实施例提供的建立标签与样式规则绑定关系的装置与建立标签与样式规则绑定关系的方法实施例属于同一构思，其具体实现过程详见方法实施例，这里不再赘述。

实施例四

本公开实施例示出了一种终端的结构示意图。该终端可以是手机等。

参照图5，终端800可以包括以下一个或多个组件：处理组件802，存储器804，电源组件806，多媒体组件808，音频组件810，输入/输出(I/O)的接口812，传感器组件814，以及通信组件816。

处理组件802通常控制终端800的整体操作，诸如与显示，电话呼叫，数据通信，相机操作和记录操作相关联的操作。处理元件802可以包括一个或多个处理器820来执行指令，以完成上述的方法的全部或部分步骤。此外，处理组件802可以包括一个或多个模块，便于处理组件802和其他组件之间的交互。例如，处理部件802可以包括多媒体模块，以方便多媒体组件808和处理组件802之间的交互。

存储器804被配置为存储各种类型的数据以支持在终端800的操作。这些数据的示例包括用于在终端800上操作的任何应用程序或方法的指令，联系人数据，电话簿数据，消息，图片，视频等。存储器804可以由任何类型的易失性或非易失性存储设备或者它们的组合实现，如静态随机存取存储器(SRAM)，电可擦除可编程只读存储器(EEPROM)，可擦除可编程只读存储器(EPROM)，可编程只读存储器(PROM)，只读存储器(ROM)，磁存储器，快闪存储器，磁盘或光盘。

电力组件806为终端800的各种组件提供电力。电力组件806可以包括电源管理系统，一个或多个电源，及其他与为音频输出设备800生成、管理和分配电力相关联的组件。

多媒体组件808包括在所述终端800和用户之间的提供一个输出接口的屏幕。在一些实施例中，屏幕可以包括液晶显示器(LCD)和触摸面板(TP)。如果屏幕包括触摸面板，屏幕可以被实现为触摸屏，以接收来自用户的输入信号。触摸面板包括一个或多个触摸传感器以感测触摸、滑动和触摸面板上的手势。所述触摸传感器可以不仅感测触摸或滑动动作的边界，而且还检测与所述触摸或滑动操作相关的持续时间和压力。在一些实施例中，多媒体组件808包括一个前置摄像头和/或后置摄像头。当终端800处于操作模式，如拍摄模式或视频模式时，前置摄像头和/或后置摄像头可以接收外部的多媒体数据。每个前置摄像头和后置摄像头可以是一个固定的光学透镜系统或具有焦距和光学变焦能力。

音频组件810被配置为输出和/或输入音频信号。例如，音频组件810包括一个麦克风(MIC)，当音频输出设备800处于操作模式，如呼叫模式、记录模式和语音识别模式时，麦克风被配置为接收外部音频信号。所接收的音频信号可以被进一步存储在存储器804或经由通信组件816发送。

I/O接口812为处理组件802和外围接口模块之间提供接口，上述外围接口模块可以是键盘，点击轮，按钮等。这些按钮可包括但不限于：主页按钮、音量按钮、启动按钮和锁定按钮。

传感器组件814包括一个或多个传感器，用于为终端800提供各个方面的状态评估。例如，传感器组件814可以检测到终端800的打开/关闭状态，组件的相对定位，例如所述组件为终端800的显示器和小键盘，传感器组件814还可以检测终端800或终端800一个组件的位置改变，用户与终端800接触的存在或不存在，终端800方位或加速/减速和终端800的温度变化。传感器组件814可以包括接近传感器，被配置用来在没有任何的物理接触时检测附近物体的存在。传感器组件814还可以包括光传感器，如CMOS或CCD图像传感器，用于在成像应用中使用。在一些实施例中，该传感器组件814还可以包括加速度传感器，陀螺仪传感器，磁传感器，压力传感器或温度传感器。

通信组件816被配置为便于终端800和其他设备之间有线或无线方式的通信。终端800可以接入基于通信标准的无线网络，如WiFi，2G或3G，或它们的组合。在一个示例性实施例中，通信部件816经由广播信道接收来自外部广播管理系统的广播信号或广播相关信息。在一个示例性实施例中，所述通信部件816还包括近场通信(NFC)模块，以促进短程通信。例如，在NFC模块可基于射频识别(RFID)技术，红外数据协会(IrDA)技术，超宽带(UWB)技术，蓝牙(BT)技术和其他技术来实现。

在示例性实施例中，终端800可以被一个或多个应用专用集成电路(ASIC)、数字信号处理器(DSP)、数字信号处理设备(DSPD)、可编程逻辑器件(PLD)、现场可编程门阵列(FPGA)、控制器、微控制器、微处理器或其他电子元件实现，用于执行上述方法。

在示例性实施例中，还提供了一种包括指令的非临时性计算机可读存储介质，例如包括指令的存储器804，上述指令可由终端800的处理器820执行以完成上述方法。例如，所述非临时性计算机可读存储介质可以是ROM、随机存取存储器(RAM)、CD-ROM、磁带、软盘和光数据存储设备等。

一种非临时性计算机可读存储介质，当所述存储介质中的指令由终端的处理器执行时，使得终端能够执行一种建立标签与样式规则绑定关系的方法，该方法包括：

获取待匹配的HTML文件和CSS文件；

根据所述CSS文件中的各选择器所包含的原子选择器，将所述各选择器划分为多个选择器分类；

遍历所述HTML文件中标签，对于每个遍历到的标签，如果根据其包含的标签名、标签属性和对应的属性值，确定在所述多个选择器分类中存在其对应的第一选择器分类，则在所述第一选择器分类所包含的选择器中，查找与所述遍历到的标签相匹配的第一选择器，并建立所述遍历到的标签与所述第一选择器所属样式规则的绑定关系。

可选的，所述根据所述CSS文件中的各选择器所包含的原子选择器，将所述各选择器划分为多个选择器分类，包括：

根据所述CSS文件中的各选择器的第一级简单选择器所包含的原子选择器，将所述各选择器划分为多个选择器分类。

可选的，所述根据所述CSS文件中的各选择器的第一级简单选择器所包含的原子选择器，将所述各选择器划分为多个选择器分类，包括：

根据所述CSS文件中的各选择器的第一级简单选择器所包含的元素选择器对应的标签名，将所述各选择器划分为多个选择器分类。

可选的，所述根据所述CSS文件中的各选择器的第一级简单选择器所包含的原子选择器，将所述各选择器划分为多个选择器分类，包括：

根据所述CSS文件中的各选择器的第一级简单选择器所包含的元素选择器对应的标签名和包含的非元素选择器对应的标签属性、属性值，将所述各选择器划分为多个选择器分类。

可选的，所述方法还包括：

如果所述遍历到的标签与多个样式规则建立绑定关系，则根据所述多个样式规则中每个样式规则的选择器的顺序信息和/或权重信息，在所述多个样式规则中选取目标样式规则，取消所述目标样式规则之外的其它样式规则与所述遍历到的标签的绑定关系。

本公开实施例中，获取待匹配的HTML文件和CSS文件，根据所述CSS文件中的各选择器所包含的原子选择器，将所述各选择器划分为多个选择器分类，遍历所述HTML文件中标签，对于每个遍历到的标签，如果根据其包含的标签名、标签属性和对应的属性值，确定在所述多个选择器分类中存在其对应的第一选择器分类，则在所述第一选择器分类所包含的选择器中，查找与所述遍历到的标签相匹配的第一选择器，并建立所述遍历到的标签与所述第一选择器所属样式规则的绑定关系。这样，终端可以根据遍历到的标签的信息，在多个选择器分类中确定该标签对应的选择器分类，再在此分类中查找标签所匹配的选择器，无需顺序查阅所有的选择器，提高了标签与样式规则的匹配效率。

本领域技术人员在考虑说明书及实践这里公开的公开后，将容易想到本公开的其它实施方案。本申请旨在涵盖本公开的任何变型、用途或者适应性变化，这些变型、用途或者适应性变化遵循本公开的一般性原理并包括本公开未公开的本技术领域中的公知常识或惯用技术手段。说明书和实施例仅被视为示例性的，本公开的真正范围和精神由下面的权利要求指出。

应当理解的是，本公开并不局限于上面已经描述并在附图中示出的精确结构，并且可以在不脱离其范围进行各种修改和改变。本公开的范围仅由所附的权利要求来限制。

Claims (11)

1.一种建立标签与样式规则绑定关系的方法，其特征在于，所述方法包括：

获取待匹配的超文本标记语言HTML文件和级联样式表CSS文件；

根据所述CSS文件中的各选择器所包含的原子选择器，将所述各选择器划分为多个选择器分类；

遍历所述HTML文件中标签，对于每个遍历到的标签，在所有第一级分类中，选取分类标识与当前标签的标签名相同的第一级分类，以及分类标识为空的第一级分类；如果存在分类标识与当前标签的标签名相同的第一级分类，或分类标识为空的第一级分类，对于选取的每个第一级分类，在其包含的第二级分类中，获取分类标识与当前标签的任一标签属性相匹配的第二级分类；在获取出的分类标识与当前标签的任一标签属性相匹配的第二级分类中，针对分类标识为class属性和ID属性的情况，进一步获取分类标识与当前标签的任一标签属性对应的属性值也匹配的第二级分类，如果属性值匹配，则在确定出的第二级分类中查找与遍历到的标签相匹配的第一选择器；在获取出的分类标识与当前标签的任一标签属性相匹配的第二级分类中，针对分类标识为通配属性、伪类属性和其他属性的情况，查找与遍历到的标签相匹配的第一选择器；

建立所述遍历到的标签与所述第一选择器所属样式规则的绑定关系。

2.根据权利要求1所述的方法，其特征在于，所述根据所述CSS文件中的各选择器所包含的原子选择器，将所述各选择器划分为多个选择器分类，包括：

根据所述CSS文件中的各选择器的第一级简单选择器所包含的原子选择器，将所述各选择器划分为多个选择器分类。

3.根据权利要求2所述的方法，其特征在于，所述根据所述CSS文件中的各选择器的第一级简单选择器所包含的原子选择器，将所述各选择器划分为多个选择器分类，包括：

根据所述CSS文件中的各选择器的第一级简单选择器所包含的元素选择器对应的标签名，将所述各选择器划分为多个选择器分类。

4.根据权利要求2所述的方法，其特征在于，所述根据所述CSS文件中的各选择器的第一级简单选择器所包含的原子选择器，将所述各选择器划分为多个选择器分类，包括：

根据所述CSS文件中的各选择器的第一级简单选择器所包含的元素选择器对应的标签名和包含的非元素选择器对应的标签属性、属性值，将所述各选择器划分为多个选择器分类。

5.根据权利要求1所述的方法，其特征在于，所述方法还包括：

如果所述遍历到的标签与多个样式规则建立绑定关系，则根据所述多个样式规则中每个样式规则的选择器的顺序信息和权重信息，在所述多个样式规则中选取目标样式规则，取消所述目标样式规则之外的其它样式规则与所述遍历到的标签的绑定关系。

6.一种建立标签与样式规则绑定关系的装置，其特征在于，所述装置包括：

获取模块，用于获取待匹配的超文本标记语言HTML文件和级联样式表CSS文件；

分类模块，用于根据所述CSS文件中的各选择器所包含的原子选择器，将所述各选择器划分为多个选择器分类；

绑定模块，用于遍历所述HTML文件中标签，对于每个遍历到的标签，在所有第一级分类中，选取分类标识与当前标签的标签名相同的第一级分类，以及分类标识为空的第一级分类；如果存在分类标识与当前标签的标签名相同的第一级分类，或分类标识为空的第一级分类，对于选取的每个第一级分类，在其包含的第二级分类中，获取分类标识与当前标签的任一标签属性相匹配的第二级分类；在获取出的分类标识与当前标签的任一标签属性相匹配的第二级分类中，针对分类标识为class属性和ID属性的情况，进一步获取分类标识与当前标签的任一标签属性对应的属性值也匹配的第二级分类，如果属性值匹配，则在确定出的第二级分类中查找与遍历到的标签相匹配的第一选择器；在获取出的分类标识与当前标签的任一标签属性相匹配的第二级分类中，针对分类标识为通配属性、伪类属性和其他属性的情况，查找与遍历到的标签相匹配的第一选择器；建立所述遍历到的标签与所述第一选择器所属样式规则的绑定关系。

7.根据权利要求6所述的装置，其特征在于，所述分类模块，用于：

根据所述CSS文件中的各选择器的第一级简单选择器所包含的原子选择器，将所述各选择器划分为多个选择器分类。

8.根据权利要求7所述的装置，其特征在于，所述分类模块，用于：

根据所述CSS文件中的各选择器的第一级简单选择器所包含的元素选择器对应的标签名，将所述各选择器划分为多个选择器分类。

9.根据权利要求7所述的装置，其特征在于，所述分类模块，用于：

根据所述CSS文件中的各选择器的第一级简单选择器所包含的元素选择器对应的标签名和包含的非元素选择器对应的标签属性、属性值，将所述各选择器划分为多个选择器分类。

10.根据权利要求6所述的装置，其特征在于，所述装置还包括取消模块，用于：

如果所述遍历到的标签与多个样式规则建立绑定关系，则根据所述多个样式规则中每个样式规则的选择器的顺序信息和/或权重信息，在所述多个样式规则中选取目标样式规则，取消所述目标样式规则之外的其它样式规则与所述遍历到的标签的绑定关系。

11.一种建立标签与样式规则绑定关系的装置，其特征在于，包括：

处理器；

用于存储处理器可执行指令的存储器；

其中，所述处理器被配置为：

获取待匹配的超文本标记语言HTML文件和级联样式表CSS文件；

根据所述CSS文件中的各选择器所包含的原子选择器，将所述各选择器划分为多个选择器分类；

遍历所述HTML文件中标签，对于每个遍历到的标签，在所有第一级分类中，选取分类标识与当前标签的标签名相同的第一级分类，以及分类标识为空的第一级分类；如果存在分类标识与当前标签的标签名相同的第一级分类，或分类标识为空的第一级分类，对于选取的每个第一级分类，在其包含的第二级分类中，获取分类标识与当前标签的任一标签属性相匹配的第二级分类；在获取出的分类标识与当前标签的任一标签属性相匹配的第二级分类中，针对分类标识为class属性和ID属性的情况，进一步获取分类标识与当前标签的任一标签属性对应的属性值也匹配的第二级分类，如果属性值匹配，则在确定出的第二级分类中查找与遍历到的标签相匹配的第一选择器；在获取出的分类标识与当前标签的任一标签属性相匹配的第二级分类中，针对分类标识为通配属性、伪类属性和其他属性的情况，查找与遍历到的标签相匹配的所述第一选择器；

建立所述遍历到的标签与所述第一选择器所属样式规则的绑定关系。