Question

我有这样的模式

<p class="strings">
This is part 1 <br />
This is part 2 <br />
This is part 3 <br />
This is part 4 <br />
This is part 5 <br />
</p>

现在我需要为第4部分和第5部分添加一些样式。你能告诉我如何做到这一点吗？

Answer 1

最好使用unordered list来满足您的要求： DEMO

<ul class="strings">
    <li>This is part 1</li>
    <li>This is part 2</li>
    <li>This is part 3</li>
    <li>This is part 4</li>
    <li>This is part 5</li>
</ul>

CSS：

.strings li {
    display:block;
    margin-bottom:8px;
}

.strings li:nth-child(4n+4){
      color:green;
}


.strings li:nth-child(4n+5){  
    color:red;
}

Answer 2

您需要将它们包装到一些标记中以应用CSS样式：

<p class="strings">
    This is part 1 <br />
    This is part 2 <br />
    This is part 3 <br />
    <span class="part4">This is part 4</span> <br />
    <span class="part5">This is part 5</span> <br />
</p>

然后你可以用这些线做任何你想做的事情：

.part4 {
    color: #3399cc;
}

.part5 {
    color: #b2d025;
}

将规则添加到文本后：元素

2 个答案: