css - 如何更改 Razor View 中第一个字母的颜色？

Question

我正在 asp.net 中的一些博客网站上工作。使用 Razor 布局页面来呈现数据库中的所有内容数据。内容部分的第一段是为一些子标题保留的，并得到了首字母的样式规则，如字体大小、颜色等。

#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 在需要时添加样式 block 。例如:

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>