如何动态创建CSS样式？

Question

在此jQuery示例中： http : //jqueryui.com/demos/sortable/#empty-lists ，它们为每个可排序ul（sortable1、2和3）具有CSS标记，如下所示：

的CSS

#sortable1 li, #sortable2 li, #sortable3 li { 
    margin: 5px;
    padding: 5px;
    font-size: 1.2em;
    width: 120px;
}​

的HTML

<div class="demo">

<ul id="sortable1" class='droptrue'>
    (...)
</ul>

<ul id="sortable2" class='dropfalse'>
    (...)
</ul>

<ul id="sortable3" class='droptrue'>
</ul>

我遇到的问题是，在我的网页中，我提前不知道我将拥有多少ul。 没有定义#sortable的每个迭代的最佳方法是什么？

Answer 1

实际上，您实际上不需要为CSS使用单独的ID，而可以使用单个类：

的CSS

.sortable li { 
    margin: 5px;
    padding: 5px;
    font-size: 1.2em;
    width: 120px;
}​

的HTML

<div class="demo">

<ul id="sortable1" class='sortable droptrue'>
    (...)
</ul>

<ul id="sortable2" class='sortable dropfalse'>
    (...)
</ul>

<ul id="sortable3" class='sortable droptrue'>
</ul>

droptrue和dropfalse类仍将按预期工作。

Answer 2

人们似乎忘记了简单的CSS3方法：

ul[id^=sortable] li {
    margin: 5px;
    padding: 5px;
    font-size: 1.2em;
    width: 120px;
}

我们在这里使用“属性起始于”选择器。 因此，这将样式应用于任何ul id属性以sortable开头的任何li元素。

例子

Answer 3

@AndrewBarber的答案是更好的方法，但是根据记录，您可以动态创建CSS。

您需要做的是使用某种服务器端语言（PHP最受欢迎，无论价格如何；还使用ASP.NET，JSP等）来动态生成CSS。

例如，您可以使用以下HTML：

<link rel="stylesheet" type="text/css" href="stylesheet.php">

然后将其用于stylesheet.php ：

<?php
    header('Content-Type: text/css');
    for ( $i = 1; $i < $sortableMax; ++$i )
    {
        echo <<<EOT
#sortable$i
{
    margin: 5px;
    padding: 5px;
    font-size: 1.2em;
    width: 120px;
}
EOT;
    }
?>

假设$sortableMax设置为5 ，这将产生以下CSS：

#sortable1
{
    margin: 5px;
    padding: 5px;
    font-size: 1.2em;
    width: 120px;
}
#sortable2
{
    margin: 5px;
    padding: 5px;
    font-size: 1.2em;
    width: 120px;
}
#sortable3
{
    margin: 5px;
    padding: 5px;
    font-size: 1.2em;
    width: 120px;
}
#sortable4
{
    margin: 5px;
    padding: 5px;
    font-size: 1.2em;
    width: 120px;
}