Question

是否可以获取css中的子元素数量？例如，我希望最后一个元素为100％ - （子数* 50px）

如果CSS3中没有可能，我可以用LESS做，还是需要JS

Answer 1

在澄清其表格后，

更新答案

您可以使用实际的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 2

不幸的是，CSS或LESS都无法做到这一点。您可以使用JavaScript解决方案，这很容易实现。

粗略的想法：

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

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

您可以使用HTML表格轻松解决您的具体问题（总是更好地发布特定问题！）

HTML：

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

CSS：

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）来获得相同的结果。< / p>

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 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

CSS获取元素总数

4 个答案: