有没有办法设计最后一行文字的字体颜色？

Question

我希望样式如下图所示： 期待遗漏风格

我制作的样式和相关代码如下：image：https://gyazo.com/171b8cf4785c2c0e629828982ac4cb69 相关代码： 。味精含量               职位：亲属

          @media(max-width: 767px)
            display: block
            padding-top: 10px
            padding-bottom: 10px

          @media(min-width: 768px)
            &:after
              position: absolute
              height: 100px
              content: ""
              top: 0px
              left: 0px
              right: 0px
              bottom: 0px
              background: -webkit-linear-gradient(bottom, #FFFFFF 48px, rgba(255, 255, 255, 0.6) 48px, rgba(255, 255, 255,0.6) 58px, rgba(255, 255, 255, 0) 58px)

Answer 1

有:last-child和:last-of-type伪类。适应您的例子：

div > p:last-child { color:#c5c5c5; }

或

div > p:last-of-type { color:#c5c5c5; }

但是，此解决方案预先假定您事先将文本拆分为行（至少是最后一行）。看来你实际上是在::first-line的静脉中的css伪元素之后将样式应用于元素的 last 行。不幸的是，afaik，没有这样的野兽存在。

Answer 2

your html:-

<div>
<p>Something your text........</p>
<p>Something your text........</p>
<p class="special">Something your text........</p>
</div>

你的css： -

p {
    color:#000;
}
p.special{
   color:#c5c5c5;
}

如果您想要使用不同颜色的同一行，则可以使用<span></span>。 HTML： -

<div>
<p>hello<span>world</span></p>
</div>

CSS： -

p{
  color:black;
}
span{
  color:red;
}