Html 带有可变参数的动态CSS？（是否可以？）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5029032/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Dynamic CSS with a variable parameter? (is it possible?)
提问by wonea
I'm trying to create a menu system, which is dynamically resizes itself horizontally to fill out depending on how many "li" entries there are, I'm dynamically creating the webpages with XSLT. My thoughts are whether this is possible todo within CSS?
我正在尝试创建一个菜单系统，它会根据有多少“li”条目动态地水平调整自身大小以填写，我正在使用 XSLT 动态创建网页。我的想法是这是否可以在 CSS 中完成？
Here's my CSS specifically for the HTML page
这是我专门用于 HTML 页面的 CSS
nav[role="navigation"] li {
float: left;
width: 10.00%; /* I want to dynamically set this width */
}
Snippet of HTML in question
有问题的 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>
My thoughts are of whether something like this would be possible to call the CSS with a parameter, or am I going against it's declarative ways?;
我的想法是这样的事情是否可以用参数调用 CSS，还是我反对它的声明方式？
nav[role="navigation"] li param {
float: left;
switch(param)
{
case : 5
{
width: 20.00%;
}
case : 3
{
width: 33.33333%;
}
}
}
回答by Just Jake
CSS is not a programming language. CSS3 has a bit of logic here or there, but no switch().
CSS 不是一种编程语言。CSS3 在这里或那里有一些逻辑，但没有switch().
For your purposes, the simplest solution by far is a touch of javascript, supplied here assuming that you use jQuery:
对于您的目的，目前最简单的解决方案是使用 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
Then in your CSS:
然后在你的 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 */
or just set the width directly with jQuery:
或者直接用 jQuery 设置宽度：
$navLis.style('width', (100/$navLis.length)+'%');
If you demandpure CSS, then get out your logic hat and look over the CSS3 selectors specification. You can construct some Byzantine and rather brittle CSS code to fake logic, such as the following selector.
如果您需要纯 CSS，那么请拿出您的逻辑帽子并查看CSS3 选择器规范。您可以构建一些拜占庭式且相当脆弱的 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 */
}
If you're using a CMS that knows how many items it is going to be putting in the list, then you can get fancy on your server backend by adding little bits of PHP to your CSS:
如果您使用的 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); ?>%;
}
Then you request the CSS/PHP script like this from your HTML:
然后你从你的 HTML 中请求这样的 CSS/PHP 脚本：
<link rel="stylesheet" type="text/css" href="/path/to/style.php?navcount=5" />
There's a few great tools out there for writing stylesheets that mix down nicely into CSS, and some even provide PHP implementations to do so dynamically. The strongest CSS extension right now is Sass, which has just the sort of syntax that you're looking for. I'd recommend using Sass through Compass, which is a framework for Sass that really gives it some teeth. You can parse Sass into CSS on-the-fly in PHP using phamlp
有一些很棒的工具可以用来编写可以很好地混合到 CSS 中的样式表，有些甚至提供 PHP 实现来动态地这样做。目前最强大的 CSS 扩展是Sass，它具有您正在寻找的那种语法。我建议通过Compass使用 Sass ，它是 Sass 的一个框架，确实给了它一些好处。您可以使用phamlp在 PHP 中即时将 Sass 解析为 CSS
Although Compass (and Sass) are awesome tools, plugging them into an existing project could be more trouble than its worth. You might just want to do simple logic using Javascript.
尽管 Compass（和 Sass）是很棒的工具，但将它们插入现有项目可能比它的价值更麻烦。您可能只想使用 Javascript 执行简单的逻辑。
回答by Sotiris
回答by kapa
It is not possible with simple CSS.
使用简单的 CSS 是不可能的。
But for this specific example, you might look at the display: table-cell;property.
但是对于此特定示例，您可能会查看该display: table-cell;属性。
