CSS以选择/样式第一个单词

这让我有些难过。我想在#content div中将所有段落的第一个单词设为14pt，而不是默认的段落（12pt）。有没有办法在纯CSS中做到这一点，还是我将第一个单词包裹在一个跨距中来完成此操作？

您正在寻找的是不存在的伪元素。有：first-letter和：first-line，但是没有：first-word。

您当然可以使用JavaScript进行此操作。这是我发现执行此操作的一些代码：http : //www.dynamicsitesolutions.com/javascript/first-word-selector/

我必须不同意Dale ...强元素实际上是错误使用的元素，意味着您只是想为元素提供样式时，就暗示了内容的含义，用途或重点。

理想情况下，您将能够使用伪类和样式表来完成此操作，但是由于那不可能，您应该使标记在语义上正确并使用<span class="first-word">。

jQuery也是如此：

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

要么

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

（通过jQuery邮件列表上的“ Wizzud” ）

遗憾的是，即使使用CSS 3，我们仍然没有:first-word :last-word使用纯CSS的etc。幸运的是，如今几乎所有内容都包含JavaScript，这使我成为我的推荐。使用nthEverything和jQuery，您可以从传统的Pseudo元素进行扩展。

当前有效的伪指令为：

• :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

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

没有测试。可以肯定的是，它将对您正常工作。我以前已经将块规则应用于伪类。您可能会对每个第一个单词都保持固定的宽度，所以text-align：center; 并给它一个很好的背景或处理负空间的方法。

希望对您有用。:)

-Motekye

您必须将单词包装在一个跨度中才能完成此操作。

使用强元素，这是目的：

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

然后在样式表中为其创建样式。

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

我将一些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方法。您可能必须使用JavaScript + Regex才能弹出一个范围。

理想情况下，第一个单词会有一个伪元素，但是您不走运，因为这似乎不起作用。我们确实有：first-letter和：first-line。

您可能可以使用：after或：before的组合来使用它，而无需使用跨度。

在段落文本中插入跨度标签。例如 <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>