css - 具有可变参数的动态 CSS？ (可能吗？)

Question

我正在尝试创建一个菜单系统，它会根据“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%;
               }
            }
}

Answer 1

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)+'%');

如果您需要 纯 CSS，那么请拿出您的逻辑帽并查看 CSS3 selectors specification .您可以构造一些拜占庭式且相当脆弱的 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 ，它正是您正在寻找的那种语法。我建议通过 Compass 使用 Sass ，这是 Sass 的一个框架，它确实给了它一些好处。您可以使用 phamlp 在 PHP 中即时将 Sass 解析为 CSS

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