Question

我想在输入Firstname之前添加*，因为我正在使用此CSS但是*正在添加Enter Firstname，Enter Lastname，因为我正在为span添加css。请帮我解释如何在不使用id的情况下为特定范围添加css。

<style>
    .pssmailform p span:before{
    content:"* ";
    color:red;
    }
</style>

<div class="pssmailform">
<p><span>Enter Firstname</span></p>
<p><span>Enter Lastname</span></p>
</div>

Answer 1

您可以使用pseudo selectors仅选择第一个p标签，如下所示：

<style>
    .pssmailform p:first-child span:before{
        content:"* ";
        color:red;
    }
</style>

更新：如果你想要2个跨度，你可以做到：

<style>
    .pssmailform p:first-child span:before, .pssmailform p:nth-child(2) span:before{
        content:"* ";
        color:red;
    }
</style>

或者，如果您想要使用奇数或偶数元素，可以使用：

<style>
    .pssmailform p:nth-child(odd) span:before {
        content:"* ";
        color:red;
    }

    .pssmailform p:nth-child(even) span:before {
        content:"* ";
        color:blue;
    }
</style>#

如果您想为每个第5个元素执行此操作：

<style>
    .pssmailform p:nth-child(5n) span:before {
        content:"* ";
        color:red;
    }
</style>

为特定范围添加CSS

1 个答案: