Wie ändert man die Farbe des ersten Buchstabens in der Rasiereransicht?

Question

Ich arbeite an einigen Blog-Website in asp.net. Verwenden von Rasierer-Layout-Seiten, um alle Inhaltsdaten aus der Datenbank darzustellen. Absatz im Inhaltsteil wird für einige Unter Titel reserviert und bekam Stilregeln für den ersten Buchstaben wie font-Größe, Farbe usw.

#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>

Wie kann ich Farbe von first-letter aus der Datenbank festgelegt? Weil jeder Post für den ersten Buchstaben des Titels eine andere Farbe hat.

Answer 1

Leider können Sie keine Pseudoeffekte mit Inline-CSS implementieren.

Ein (armer) Workaround für dieses Problem ist, dass Ihre js Stilblöcke hinzufügen, wenn sie benötigt werden. Zum Beispiel:

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>