Question

我有一个php变量，想要通过css隐藏所有大于$ number的行。例如。 $ number = 12;

<style>
#row<?php echo $number?>{
display: none;
}
</style>

这只会隐藏一行12。我想要隐藏大于12的所有行。

有什么建议吗？

Answer 1

添加循环，并自动将代码写入页面....

<?php

for ($i = $number; $i <= 100; $i++) {
    echo '#row'.$i.' {display: none;}';
}

?>

在上面的代码中，我们从$ number（例如12）开始，然后上升到100.我们将每个数字循环到12到100之间并写出我们的“隐藏”代码。

上面的代码示例会返回如下内容：

#row12 {display: none;}
#row13 {display: none;}
#row14 {display: none;}
#row15 {display: none;}

此外，如果您想将其直接放在页面中，它可能如下所示：

<?php

echo '<style>';

for ($i = $number; $i <= 100; $i++) {
  echo '#row'.$i.' {display: none;}';
}

echo '</style>';

?>

Answer 2

为此，您需要父div和支持:nth-child

的浏览器

HTML

<div class="data">
    <div class="row">row1</div>
    <div class="row">row2</div>
    <div class="row">row3</div>

    <div class="row">row4</div>
    <div class="row">row5</div>
    <div class="row">row6</div>

    <div class="row">row7</div>
    <div class="row">row8</div>
    <div class="row">row9</div>    

    <div class="row">row10</div>
    <div class="row">row11</div>
    <div class="row">row12</div>       

    <div class="row">row13</div>
    <div class="row">row14</div>
    <div class="row">row15</div>       
</div>

CSS

.data div:nth-child(n+12) {
   display: none;
}

参见演示http://jsfiddle.net/PY5Fe/101/

Answer 3

使用类标记最终可见行 - 例如finalRow - 并使用CSS＆＃39; s general sibling selector ~：

〜combinator分隔两个选择器，只有当第一个元素以第一个元素开头时才匹配第二个元素，并且它们共享一个共同的父元素。

隐藏其后面的所有行（此示例假定每行都是div;当然需要根据需要更改）：

<style>
  .finalRow ~ div {
    display: none;
  }
</style>

见http://jsfiddle.net/dh7Lp8vk/。这种方法的一个好处是，您可以让客户端Javascript根据需要移动finalRow类。

隐藏ID大于$ number的行

3 个答案: