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来做简单的逻辑。
很全面的帖子,谢谢! – wonea 2011-02-17 14:30:30