如何使用CSS为第一个单词着色

How can I color the first word using CSS when I have div tag for the title?

 <div class="head-logo">  <? echo $siteName ?>  </div>

CSS

.head-logo{
     text-align:center;
     color:#000000; 
     font:normal 22px Tahoma;
     margin: 0px 10px 20px 60px;
}

You can use php explode

<div class="head-logo">
    <?
        $title = explode(" ", $siteName, 2);
        echo '<span style="color: #FF0000">'.$title[0].'</span> '.title[1]);
    ?>
</div>

You can do it this way:

<div class="head-logo">
    <?
    $title = explode(" ", "My title here");
    echo '<span class="firstWord">'.$title[0].'</span>'.substr(implode(" ", $title), strlen($title[0]));
    ?>
</div>

.head-logo{
    text-align:center;
    color:#000000; 
    font:normal 22px Tahoma;
    margin: 0px 10px 20px 60px;
}

.firstWord{color: red;}

Okay, so there are ways to do this with JS, and some tricky CSS workarounds.

Here's why it doesn't work: There is no "::first-word" pseudo class, since in a code language, one 'word' is a pretty half-baked definition. So the way I have always done this is with <span>...</span> tags, but I see you are using PHP to echo your website name, so you may be able to do something along the lines of this using the ::first-line pseudo element, then making the pseudo a block and picking it's length that way:

CSS:

display:block;
Width:40-100px; /* just enough for one word, depends on font size */
Overflow:visible; /* so longer words don't get clipped.*/
float:left; /* so it will flow with the paragraph. */
position:relative; /* for typeset adjustments. */

CSS to increase size of first word

This is a JS solution, that essentially replaces adds a span class in your tag and lets you change how many letters are there.

JS:

$(function() {
    $('h2').each(function(){
        $(this).html( $(this).text().replace(/(^\w{5})/,'<span>$1</span>'));
    });
});

Style half of a word, sentence, etc

fiddle: http://jsfiddle.net/3gMK3/

The fiddle, CSS, and JS is not mine, just something I found while researching