带有可变参数的动态CSS？ （是否可以？）

我正在尝试创建一个菜单系统，该系统会根据有多少“li”条目水平动态调整自身大小以进行填充，我正在使用 XSLT 动态创建网页。我的想法是这是否可以在 CSS 中完成？

这是我专门用于 HTML 页面的 CSS

nav[role="navigation"] li {
    float: left;
    width: 10.00%;  /* I want to dynamically set this width */
}

有问题的 HTML 片段

<nav role="navigation" count="2"><?xml version="1.0" encoding="utf-8"?>
  <ul>
    <li>
      <a href="movies.html">Movies</a>
    </li>
    <li>
      <a href="news.html">News</a>
    </li>
  <ul>
</nav>

我的想法是这样的东西是否可以使用参数调用CSS，或者我是否违背它的声明方式？

nav[role="navigation"] li param {
    float: left;
            switch(param)
            {
               case : 5
               {
          width: 20.00%;
               }
               case : 3
               {
          width: 33.33333%;
               }
            }
}

CSS 不是一种编程语言。 CSS3 有一些逻辑，但没有switch().

就您的目的而言，迄今为止最简单的解决方案是使用 javascript，此处提供的假设您使用 jQuery：

var $navLis = $('nav[role=navigation] > ul > *');
$navLis.addClass('count'+$navLis.length);  // add a class to every li indicating 
                                           // total number of list items

然后在你的CSS中：

nav[role=navigation] li { /* default styling & width */ }
nav[role=navigation] li.count2 { /* your conditional styling */ }
nav[role=navigation] li.count5 { /* your conditional styling */ }
/* etc */

或者直接使用 jQuery 设置宽度：

$navLis.style('width', (100/$navLis.length)+'%');

If you demand纯CSS，然后拿出你的逻辑帽子看看CSS3 选择器规范 http://www.w3.org/TR/css3-selectors/#sibling-combinators。您可以构造一些拜占庭式且相当脆弱的 CSS 代码来伪造逻辑，例如以下选择器。

nav[role=navigation] li:first-child + nav[role=navigation] li:last-child {
  /* matches last of two items if a list has only two items */
}

如果您使用的 CMS 知道要在列表中放入多少个项目，那么您可以通过向 CSS 添加少量 PHP 来让您的服务器后端变得更有趣：

<?php header('Content-type: text/css'); 
  if (isset($_GET['navcount']) && $_GET['navcount'] != "") {
    $navcount = $_GET['navcount'];
  } else { $navcount = 5.0; } // Default value
?>
/* ... your css code here... */
nav[role="navigation"] li {
  float: left;
  width: <?php echo (100.0/$navcount); ?>%;
}

然后，您从 HTML 中请求这样的 CSS/PHP 脚本：

<link rel="stylesheet" type="text/css" href="/path/to/style.php?navcount=5" />

有一些很棒的工具可用于编写可以很好地混合到 CSS 中的样式表，有些甚至提供 PHP 实现来动态地执行此操作。目前最强的 CSS 扩展是Sass http://sass-lang.com/，它正是您正在寻找的语法。我建议使用 SassCompass http://compass-style.org/，这是 Sass 的一个框架，确实给了它一些好处。您可以使用 PHP 将 Sass 即时解析为 CSSphamlp http://code.google.com/p/phamlp/

尽管 Compass（和 Sass）都是很棒的工具，但将它们插入现有项目可能会带来更多麻烦，而不是其价值。您可能只想使用 Javascript 执行简单的逻辑。