CSS 来选择/设置第一个单词的样式
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/55612/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS to select/style first word
提问by dragonmantank
This one has me kind of stumped. I want to make the first word of all the paragraphs in my #content div at 14pt instead of the default for the paragraphs (12pt). Is there a way to do this in straight CSS or am I left wrapping the first word in a span to accomplish this?
这让我有点难住了。我想将 #content div 中所有段落的第一个单词设为 14pt，而不是段落的默认值 (12pt)。有没有办法在直接的 CSS 中做到这一点，或者我是否将第一个单词包装在一个跨度中来完成这个？
回答by Robby Slaughter
What you are looking for is a pseudo-element that doesn't exist. There is :first-letter and :first-line, but no :first-word.
您正在寻找的是一个不存在的伪元素。有:first-letter 和:first-line，但没有:first-word。
You can of course do this with JavaScript. Here's some code I found that does this: http://www.dynamicsitesolutions.com/javascript/first-word-selector/
你当然可以用 JavaScript 做到这一点。这是我发现的一些代码：http: //www.dynamicsitesolutions.com/javascript/first-word-selector/
回答by Prestaul
I have to disagree with Dale... The strong element is actually the wrong element to use, implying something about the meaning, use, or emphasis of the content while you are simply intending to provide style to the element.
我不得不不同意 Dale... strong 元素实际上是使用错误的元素，暗示了内容的含义、用途或重点，而您只是打算为元素提供样式。
Ideally you would be able to accomplish this with a pseudo-class and your stylesheet, but as that is not possible you should make your markup semantically correct and use <span class="first-word">.
理想情况下，您可以使用伪类和样式表来完成此操作，但由于这是不可能的，因此您应该使标记在语义上正确并使用<span class="first-word">.
回答by Jon Hadley
Same thing, with jQuery:
同样的事情，使用 jQuery：
$('#links a').each(function(){
var me = $(this);
me.html( me.text().replace(/(^\w+)/,'<strong></strong>') );
});
or
或者
$('#links a').each(function(){
var me = $(this)
, t = me.text().split(' ');
me.html( '<strong>'+t.shift()+'</strong> '+t.join(' ') );
});
(Via 'Wizzud' on the jQuery Mailing List)
（通过jQuery 邮件列表上的“Wizzud” ）
回答by Simon Hayter
Sadly even with the likes of CSS 3 we still do not have the likes of :first-word:last-wordetc using pure CSS. Thankfully there's almost a JavaScript nowadays for everything which brings me to my recommendation. Using nthEverythingand jQueryyou can expand from the traditional Pseudo elements.
遗憾的是，即使有了 CSS 3 之类的东西，我们仍然没有:first-word:last-word使用纯 CSS 之类的东西。值得庆幸的是，现在几乎所有的东西都使用 JavaScript，这让我得到了我的推荐。使用nthEverything和jQuery，您可以扩展传统的伪元素。
Currently the valid Pseudos are:
目前有效的伪代码是：
: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
: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
And using nth Everything we can expand this to:
并使用 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
::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
回答by Motekye Guakein
Pure CSS solution:
纯 CSS 解决方案：
Use the :first-line pseudo-class.
使用 :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. */
Didn't test that. Pretty sure it will work fine for you tho. I've applied block rules to pseudo-classes before. You might be stuck with a fixed width for every first word, so text-align:center; and give it a nice background or something to deal with the negative space.
没有测试那个。很确定它对你有用。我之前已经将块规则应用于伪类。您可能会为每个第一个单词固定宽度，所以 text-align:center; 并给它一个漂亮的背景或其他东西来处理负空间。
Hope that works for you. :)
希望这对你有用。:)
-Motekye
-Motekye
回答by hazzen
You have to wrap the word in a span to accomplish this.
您必须将单词包裹在一个跨度中才能完成此操作。
回答by Dale Ragan
回答by user1171848
Here's a bit of JavaScript and jQuery I threw together to wrap the first word of each paragraph with a <span>tag.
这里有一些 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>';
}
});
});
You can then use CSS to create a style for .firstWord.
然后，您可以使用 CSS 为.firstWord.
It's not perfect, as it doesn't account for every type of whitespace; however, I'm sure it could accomplish what you're after with a few tweaks.
它并不完美，因为它没有考虑到所有类型的空白；但是，我相信它可以通过一些调整来完成您所追求的目标。
Keep in mind that this code will only execute after page load, so it may take a split second to see the effect.
请记住，此代码只会在页面加载后执行，因此可能需要一秒钟才能看到效果。
回答by Rob Allen
There isn't a plain CSS method for this. You might have to go with JavaScript + Regex to pop in a span.
没有一个简单的 CSS 方法。您可能必须使用 JavaScript + Regex 才能在 span 中弹出。
Ideally, there would be a pseudo-element for first-word, but you're out of luck as that doesn't appear to work. We do have :first-letter and :first-line.
理想情况下，第一个单词会有一个伪元素，但你很不走运，因为这似乎不起作用。我们确实有 :first-letter 和 :first-line。
You might be able to use a combination of :after or :before to get at it without using a span.
您可能可以使用 :after 或 :before 的组合来实现它，而无需使用跨度。
回答by Ashique
Insert Span Tag in your paragraph text. For Example-
<p><span>Hello</span>My Name Is Dot</pand then style the first letter.
在段落文本中插入 Span 标签。例如 -
<p><span>Hello</span>My Name Is Dot</p然后设置第一个字母的样式。
