具有可變參數的動態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？（有可能嗎？）