剃刀で最初の文字の色を変更するにはどうすればいいですか？

Question

私はasp.netのいくつかのブログのウェブサイトで働いています。かみそりのレイアウトページを使用して、データベースからすべてのコンテンツデータを表示します。コンテンツ部分の最初の段落は、いくつかのサブタイトルのために予約さやフォントサイズなどの最初の文字のスタイルルールを持っている、色など

#post-content .blog-post p:first-child { 
 
    font-size: 1.85em; 
 
    line-height: 1.4em; 
 
} 
 

 
#post-content .blog-post p:first-child:first-letter { 
 
    color: #43464b; 
 
    float: left; 
 
    font-size: 2.85em; 
 
    font-weight: 700; 
 
    margin: 6px 8px -5px 0; 
 
    line-height: 60px; 
 
}

<section id="post-content" class="b-container"> 
 

 
    <div class="blog-post"> 
 
    @*first paragraph reserved for title*@ 
 
    <p> 
 
     @Model.PostSubhead1 
 

 
    </p> 
 
    @*first paragraph end*@ 
 
    <p> 
 
     @Model.PostText1 
 
    </p> 
 
    <figure> 
 
     <img src="@Url.Content(Model.PostBigImage1)" class="big-image" /> 
 
     <em class="img-text"> 
 
        @Model.PostBigImageText1 
 
       </em> 
 
    </figure> 
 

 
    </div> 
 
</section>

どのように私は、データベースからfirst-letterの色を設定することができますか？すべての投稿がタイトルの最初の文字の色が異なるためです。

Answer 1

残念ながら、インラインCSSを使用して擬似エフェクトを実装することはできません。

この問題の回避策は、jsが必要なときにスタイルブロックを追加することです。たとえば：

var colors = ["#6e2d5b", "#b2a9e9", "#489b34", "#5765a9"]; 
 
var i = 0; 
 
function addArticle() { 
 
    i++; 
 
    //get the color and put it in a var named color 
 
    var color = colors[i%4]; 
 
    //generate a custom classname and put it in a var named customClass 
 
    var customClass = "_" + color.substr(1); 
 
    var articles = document.getElementById("articles"); 
 
    var article = document.createElement("div"); 
 
    article.className = customClass; 
 
    article.innerHTML = "content goes here"; 
 
    articles.appendChild(article); 
 
    var css = "." + customClass + "::first-letter{color: " + color + ";} "; 
 
    document.getElementById("style").appendChild(document.createTextNode(css)); 
 
}

<style id="style"> 
 

 
</style> 
 
<div id="articles"> 
 
</div> 
 
<button onclick="addArticle();">add an aricle</button>