html - Is it possible with CSS to target letters within a paragraph without span?

Question

I'm trying to add an effect to my letters, but I don't want to add a bunch of span tags all over the place. Is it possible to target a specific letter within a line of text with CSS?

I know there is :first-child, :first-of-type, :only-child, :last-child, :last-of-type, :only-of-type ,:nth-child, :nth-of-type ,:nth-last-child and :nth-last-of-type I believe. But none of these help do what I want in any combination.

This is what I need to target letter by letter. <p>Hello.</p>

This is what I don't want. Nor lettering.js.

<p>
<span class"somefancyname">H</span>

<span class"somefancyname">e</span>

<span class"somefancyname">l</span>

<span class"somefancyname">l</span>

<span class"somefancyname">o</span>

<span class"somefancyname">.</span>
</p>

Lastly - Is it really bad to use that many span tags? I feel dirty if I use that many... not sure why really. Thanks in advanced! If someone can reword this to make sense - I feel I rambled a bit - thank you!

Note: I want to add different animations to the letters. Not just (1) place on the page - so that's why I'm concerned with multiple span tags. What animations? Some bouncing over here and some color changing over there and maybe some rotating over yonder. Is my only solution to use JS or just give in to the span tags?

Answer 1

我知道 jquery 可以做到这一点：

$(document).ready(function(){
count = 0; limit = 10;
var refreshId = setInterval( function() {
if(count < limit) {

$( '.data tr:contains("blah")') .css( {"display":"none"} );
$( '.mainpart h2 a') .css( {"text-decoration":"underline" , "color":"#38c"} )

}
else {
clearInterval(refreshId);
}
}, 2000);
});