Question

我正在使用低于输出的插件：

<div class="CUSTOM CODE">
    <ul>
        <li> line 1 </li>
        <li> line 2 </li>
        <li> line 3 </li>
        <li> line 4 </li>
    </ul>
</div>

问题是我需要保持单行，例如line1。我只能控制CSS类。可以通过CSS类完成这项工作吗？

Answer 1

尝试使用此类代码。

.CUSTOM ul li:nth-child(2){
   background:black;
}

Answer 2

您可以使用:not和:first-child

的组合

＆＃13;

.CUSTOM li:not(:first-child){display:none;}

＆＃13;

<div class="CUSTOM CODE">
    <ul>
        <li> line 1 </li>
        <li> line 2 </li>
        <li> line 3 </li>
        <li> line 4 </li>
    </ul>
</div>

＆＃13;

这在IE 8或IE 7中可能无效：http://caniuse.com/#feat=css-sel3

Answer 3

在css，更改line1的示例：

ul li:nth-child(1)
{
    /* example */
    color: green;
    border:2px solid black;
    padding:6px;
}

或者在html，示例更改第4行：

<div>
 <ul>
  <li> line 1 </li>
  <li> line 2 </li>
  <li> line 3 </li>
  <li style="color:blue;padding:6px;"> line 4 </li>
 </ul>
</div>

Answer 4

试试这个......

＆＃13;

.CUSTOM.CODE li:first-child {display:none}

＆＃13;

<div class="CUSTOM CODE">
    <ul>
        <li> line 1 </li>
        <li> line 2 </li>
        <li> line 3 </li>
        <li> line 4 </li>
    </ul>
</div>

＆＃13;

使用CSS删除行

4 个答案: