XSLT -CSS的所有元素属性的组合-样式表

Question

我想知道是否可以通过XSLT完成以下工作。我对它还挺陌生的。

假设我有一个具有各种可能属性的元素。对于每个属性组合，我想要显示快速内容。

具有不同属性的元素：

<!ATTLIST foo
     apple CDATA #IMPLIED 
     peach CDATA #IMPLIED
     kiwi  CDATA #IMPLIED
     ...
>

所需的CSS：

foo[apple]:before {
    content: '@apple: ' attr(apple);
}
foo[peach]:before {
    content: '@peach: ' attr(peach);
}
foo[kiwi]:before {
    content: '@kiwi: ' attr(kiwi);
}
foo[apple][peach]:before {
    content: '@apple: ' attr(apple) ' @peach: ' attr(peach);
}
foo[apple][kiwi]:before {
    content: '@apple: ' attr(apple) ' @kiwi: ' attr(kiwi);
}
foo[peach][kiwi]:before {
    content: '@apple: ' attr(peach) ' @kiwi: ' attr(kiwi);
}
foo[apple][peach][kiwi]:before {
    content: '@apple: ' attr(apple) ' @peach: ' attr(peach) ' @kiwi: ' attr(kiwi);
}

顺序并不重要，但每个组合应该只发生一次。有些元素有五个以上的属性，因此通过XSLT获得CSS的所有组合将是非常有帮助的。不幸的是，在我的例子中，js不是一个选项，输出必须是普通的CSS2。

我无法思考如何解决这个问题，任何帮助都是非常感谢的。

Answer 1

对于这类问题，XSLT是一个糟糕的选择。最好是使用通用的编程语言。这些组合可以用一个位字段来表示，其中包含每个属性的位。然后，您可以通过数字1到2^n-1来枚举所有组合。

下面是一个Javascript示例：

​

function generateCss(items) {
  var n = items.length;
  var m = 1 << n; // 2^n
  
  document.write('<pre>');

  for (var i = 1; i < m; i++) {
    var subset = items.filter(function(item, index) {
      // (1 << index) is the bit representing the current item.
      return i & (1 << index);
    });

    var attrs = subset.map(function(item) {
      return '[' + item + ']';
    }).join('');

    var content = subset.map(function(item, index) {
      return "'" + (index == 0 ? '' : ' ') + '@' + item +
             ": ' attr(" + item + ")";
    }).join(' ');

    document.write(
      'foo' + attrs + ':before {\n' +
      '  content: ' + content + ';\n' +
      '}\n');
  }

  document.write('</pre>');
}

generateCss([ 'apple', 'peach', 'kiwi' ]);

​