CSS獲取元素的總數

Question

是否可以獲取CSS中的子元素的數量？ 例如，我想最後一個元素是100％ - （孩子的數量* 50像素）

如果有CSS3中沒有可能，我可以用更少做到這一點還是需要JS

Answer 1

不幸的是，CSS或LESS都無法做到這一點。您可以使用JavaScript解決方案，該解決方案實施起來相當簡單。

粗略的想法：

HTML：

<table> 
    <tr> 
     <td>1</td> 
     <td>2</td>  
     <td>3</td> 
     <td>last</td> 
    </tr> 
    </table> 

CSS

var allChildren = document.querySelectorAll('#myContainer > *'); 
var count = allChildren.length; 

allChildren[count-1].style.width = 'calc(100% - '+ count * 50 +'px)'; 

您的具體問題（！總是更好張貼特定問題），可以很容易地用HTML表格來解決：

table { 
    width:300px; 
    border:1px solid red; 
} 

td { 
    width:50px; 
    border: 1px solid blue; 
} 

td:last-child { 
    width:auto; 
} 

DEMO：http://jsbin.com/eTeBudiR/1/edit

如果你想顯示在自然界中沒有表格，你只是想佈局看起來像的數據，你可以使用CSS（display:table，display:table-cell），以達到同樣的效果。

HTML：

<div id="myContainer"> 
    <div>1</div> 
    <div>2</div> 
    <div>3</div> 
    <div>last</div> 
    </div> 

CSS：

#myContainer { 
    display:table; 
    width:300px; 
    border:1px solid red; 
} 

#myContainer > div { 
    display:table-cell; 
    border:1px solid blue; 
    width:50px; 
} 

#myContainer > div:last-child { 
    width:auto; 
} 

DEMO：http://jsbin.com/eTeBudiR/2/edit

Answer 2

更新答案評論後澄清其表

你可以使用一個實際table標籤，使最後一個頭th有width:auto而其餘有一個固定的寬度。這是正常的方式表工作，它將使填寫表格的其餘部分擴大..

如果你有使用其他標籤，你可以通過使用display:table，display:table-row和display:table-cell數值模擬表..

<div class="table"> 
    <div class="headers"> 
     <div>1</div> 
     <div>2</div> 
     <div>3</div> 
     <div>4</div> 
     <div>5</div> 
     <div>6</div> 
     <div>7</div> 
     <div>8</div> 
    </div> 
</div> 

的CSS

.table{ 
    display:table; 
    width:100%; 
} 
.headers{ 
    display:table-row; 
} 
.headers div{ 
    width:50px; 
    display:table-cell; 
} 
.headers div:last-child{ 
    width:auto; 
} 

演示在http://jsfiddle.net/gaby/KSbXM/

---

原來的答案

您可以使用:last-child選擇..

例如

<div class="container"> 
    <div>1</div> 
    <div>2</div> 
    <div>3</div> 
    <div>4</div> 
    <div>5</div> 
</div> 

和

.container div{ 
    height:50px; 
} 

.container div:last-child{ 
    height:100%; 
} 

Answer 3

你需要JavaScript才能獲得元素的數量或對顯示的HTML的任何其他信息。目前沒有辦法用CSS來做這件事，因爲它的設計可能永遠不會。

最後一項：像其他人提到的那樣，孩子是一種選擇。你可以以某種方式將它與設置父高度（或寬度？）的關係結合起來。但是會有更多的信息需要。

編輯：

table { 
    width: 1000px; /* or whatever you want it to be */ 
} 
td{ 
    width: 50px; 
} 
td:last-child{ 
    width: auto; 
} 

http://codepen.io/johannesjo/pen/KLcrA

Answer 4

你可以嘗試從這個事情。

.t1{ 
    counter-increment : test 1; 
    background-color:red; 

} 
.t1:after{  
    content : counter(test); 
    width : calc(counter(test)*50px); 
} 

工作演示here