具有可变参数的动态CSS？（有可能吗？）

我试图创建一个菜单系统，它根据有多少“li”条目动态调整自己的水平大小以填充，我使用XSLT动态创建网页。我的想法是，这是否可以在CSS内使用？具有可变参数的动态CSS？（有可能吗？）

这里是我的CSS专门为HTML页面

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%; 
       } 
      } 
}

来源

2011-02-17 wonea

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，知道它有多少项目要在列表中，以便把，那么你可以通过添加PHP的小位你的CSS让您的服务器后端花哨：

<?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的一个框架，它确实给了它一些机会。您可以使用以下方式将Sass解析为CSS：phamlp

尽管Compass（和Sass）是非常棒的工具，但将它们插入现有项目可能比其价值更麻烦。你可能只想使用Javascript来做简单的逻辑。

来源

2011-02-17 13:34:44

很全面的帖子，谢谢！ – wonea 2011-02-17 14:30:30

你试过LESS？

以内的动态行为如变量，混入，操作和功能扩展CSS。 LESS运行在客户端（IE 6+，Webkit，Firefox）和服务器端的上，带有Node.js.

来源

2011-02-17 12:45:50 Sotiris

简单的CSS是不可能的。

但是对于此特定示例，您可能会看到display: table-cell;属性。

来源

2011-02-17 12:47:22 kapa

具有可变参数的动态CSS？ （有可能吗？）

回答

相关问题

具有可变参数的动态CSS？（有可能吗？）