CSS для выбора / стиля первого слова

Для этого вам нужно заключить слово в диапазон.

Вы ищете псевдоэлемент, которого не существует. Есть: first-letter и: first-line, но нет: first-word.

Конечно, вы можете сделать это с помощью JavaScript. Вот код, который я нашел, что делает это: http://www.dynamicsitesolutions.com/javascript/first-word-selector/

Используйте элемент сильный, его цель:

<div id = "content">
    <p><strong>First Word</strong> rest of paragraph.</p>
</div>

Затем создайте для него стиль в своей таблице стилей.

#content p strong
{
    font-size: 14pt;
}

Для этого не существует простого метода CSS. Возможно, вам придется использовать JavaScript + Regex, чтобы всплывать в диапазоне.

В идеале для первого слова должен быть псевдоэлемент, но вам не повезло, поскольку это не работает. У нас есть: first-letter и: first-line.

Вы можете использовать комбинацию: after или: before, чтобы добраться до него без использования диапазона.

Я должен не согласиться с Дейлом ... Сильный элемент - это на самом деле неправильный элемент для использования, что подразумевает что-то о значении, использовании или акцентировании контента, в то время как вы просто намереваетесь придать стиль элементу.

В идеале вы могли бы сделать это с помощью псевдокласса и вашей таблицы стилей, но поскольку это невозможно, вам следует сделать свою разметку семантически правильной и использовать <span class = "first-word">.

То же самое и с jQuery:

$('#links a').each(function(){
    var me = $(this);
    me.html( me.text().replace(/(^\w+)/,'<strong></strong>') );
  });

или же

$('#links a').each(function(){
    var me = $(this)
       , t = me.text().split(' ');
    me.html( '<strong>'+t.shift()+'</strong> '+t.join(' ') );
  });

(Через «Виззуд» на Список рассылки jQuery)

Решение на чистом CSS:

Используйте псевдокласс: first-line.

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. */

Не проверял. Уверен, что это сработает для вас. Раньше я применял правила блокировки к псевдоклассам. У вас может быть фиксированная ширина для каждого первого слова, так выравнивание текста: центр; и придайте ему красивый фон или что-то, чтобы справиться с негативным пространством.

Надеюсь, это сработает для вас. :)

-Motekye

Вот немного JavaScript и jQuery, которые я собрал вместе, чтобы обернуть первое слово каждого абзаца тегом <span>.

$(function() {
    $('#content p').each(function() {
        var text = this.innerHTML;
        var firstSpaceIndex = text.indexOf(" ");
        if (firstSpaceIndex > 0) {
            var substrBefore = text.substring(0,firstSpaceIndex);
            var substrAfter = text.substring(firstSpaceIndex, text.length)
            var newText = '<span class = "firstWord">' + substrBefore + '</span>' + substrAfter;
            this.innerHTML = newText;
        } else {
            this.innerHTML = '<span class = "firstWord">' + text + '</span>';
        }
    });
});

Затем вы можете использовать CSS для создания стиля для .firstWord.

Он не идеален, поскольку не учитывает все типы пробелов; однако я уверен, что он может добиться того, что вам нужно, с помощью нескольких настроек.

Имейте в виду, что этот код будет выполняться только после загрузки страницы, поэтому может потребоваться доля секунды, чтобы увидеть эффект.

К сожалению, даже с подобными CSS 3 у нас все еще нет подобных :first-word, :last-word и т. д., Использующих чистый CSS. К счастью, в настоящее время есть почти JavaScript для всего, что подводит меня к моей рекомендации. Используя nthEverything и jQuery, вы можете расширить традиционные псевдоэлементы.

В настоящее время допустимые псевдонимы:

• :first-child
• :first-of-type
• :only-child
• :last-child
• :last-of-type
• :only-of-type
• :nth-child
• :nth-of-type
• :nth-last-child
• :nth-last-of-type

И используя nth Everything, мы можем расширить это до:

• ::first-letter
• ::first-line
• ::first-word
• ::last-letter
• ::last-line
• ::last-word
• ::nth-letter
• ::nth-line
• ::nth-word
• ::nth-last-letter
• ::nth-last-line
• ::nth-last-word

Вставьте тег Span в текст абзаца. Например- <p><span>Hello</span>My Name Is Dot</p а затем стилизуйте первую букву.

Простой способ сделать с HTML + CSS:

TEXT A <b>text b</b>

<h1>text b</h1>

<style>
    h1 { /* the css style */}
    h1:before {content:"text A (p.e.first word) with different style";    
    display:"inline";/* the different css style */}
</style>