Question

我有一个问题，在我的div标签中我在“Linkovi”类中有一些文字，但我想分别改变第一个字母的颜色“»”。

如何使用第一个字母选项调用“Linkovi”类！

谢谢！

<div id="banner5Linkovi">
<p id="QuickLinks"> QUICK LINKS</p>
</br>
<p class="Linkovi"> » &nbsp    This is text!</p> <br/>
<p class="Linkovi"> » &nbsp    This is text!</p> <br/>
<p class="Linkovi"> » &nbsp    This is text! </p> <br/>
<p class="Linkovi"> » &nbsp    This is text! </p> <br/>
<p class="Linkovi"> » &nbsp    This is text!  </p> <br/>
<p class="Linkovi"> » &nbsp    This is text!  </p> <br/>
<p class="Linkovi"> » &nbsp    This is text!  </p> <br/>
<p class="Linkovi"> » &nbsp    This is text!  </p> <br/>
<p class="Linkovi"> » &nbsp    This is text! </p> <br/>
<p class="Linkovi"> » &nbsp    This is text! </p> 
</div>

Answer 1

您可以从内容中删除»并执行此操作：

.Linkovi:before {
    content: '»';
    color: #00f;
}

如果数据代表列表，我还建议您使用<ul>和<li>。

Answer 2

使用：

.Linkovi:first-letter{
  color: red;
}

但是虽然:: first-letter不会起作用，因为你正在使用非单词字符，所以你也可以使用伪类：

.Linkovi:before{
  color: red;
  content: "»"
}

demo

Answer 3

您无法将first-letter与»一起使用。它必须是字母或数字，解决方案必须是您的元素中有两个不同的span标记，然后相应地定位&raquo：

<p class="Linkovi"><span class="red"> » </span><span>&nbsp    This is text!</span></p> <br/>

.red {
    color: red;
}

Answer 4

<p class="Linkovi"> » &nbsp    This is text!</p> <br/>

你不应该使用那个 ......

使用

<p class="Linkovi">This is text!</p>

代替 - 并使用margin为这些段落提供一些空间，并使用带有生成内容的CSS伪元素来创建»并为其提供与元素不同的颜色和空间“真正的”文字内容。

 p.Linkovi {
   margin-bottom: 1em;
 }
 p.Linkovi:before {
   content: "»";
   color: red;
   padding: 0 20px 0 5px;
 }

<p class="Linkovi">This is text!</p>
<p class="Linkovi">This is text!</p>
<p class="Linkovi">This is text!</p>

无法改变第一个字母CSS的颜色

4 个答案: