Question

我试图为第一个WORD of sentence

着色

<div class="logoS">Title Of The Page</div>

正在使用的CSS是

.logoS{
    padding: 0px;
    float: left;
    font-family: 'Open Sans', Helvetica, Arial, sans-serif;
    color: white;
    border:solid 1px black;
    font-weight: bold;
    font-size: 22px;
}

.logoS::nth-word(1) {
  margin-right: 20px;
}

我只想着色＆＃34; TITLE＆＃34;不是其他的话，任何解决方案

Answer 1

试试这个，希望这会有所帮助。

.logoS:before {
  color: red;
  content: "Title ";
}

<div class="logoS">Of The Page</div>

Answer 2

代码

<div class="logoS"><span id="first">Title</span> Of The Page</div>

.logoS{
    padding: 0px;
    float: left;
    font-family: 'Open Sans', Helvetica, Arial, sans-serif;
    color: blue;
    border:solid 1px black;
    font-weight: bold;
    font-size: 22px;
}

#first {
  margin-right: 20px;
    color: red;
}

Answer 3

对第一个单词使用首选样式的范围，如

<div class="logoS"><span class="spanstyle">Title </span>Of The Page</div>

// CSS
.spanstyle {
  color:blue;
}

检查link。有:first-letter和:first-line，但没有:first-word。

Answer 4

使用span标记，这样它就不会启动新行。例如：

<div class="logoS"><span id="title">Title</span> Of The Page</div>

然后在你的CSS中添加：

#title{
color: red
}

希望这有效！

Answer 5

有：第一个字母和：第一行，但没有：第一个字（MDN Search）。只需将第一个单词包装在元素中即可。 Fiddle exmaple

<div class="logoS"><span id="first-word">Title</span> Of The Page</div>

.logoS{
    padding: 0px;
    float: left;
    font-family: 'Open Sans', Helvetica, Arial, sans-serif;
    color: blue;
    border:solid 1px black;
    font-weight: bold;
    font-size: 22px;
}

#first-word {
  margin-right: 20px;
    color: red;
}

或者你可以使用javascript（这里是example），但是如果你看一下代码，他所做的只是在一个范围中包装第一个单词并添加一个类。

为Sentence CSS的第一个单词着色

5 个答案: