代码之家  ›  专栏  ›  技术社区  ›  rap-2-h

只为P中的一个字母更改样式

  •  0
  • rap-2-h  · 技术社区  · 6 年前

    假设我有这个HTML代码:

    <p>Hello world</p>
    

    有没有一种方法,只使用CSS,而不修改实际的HTML,来更改 w Hello world 文本?(比如,把它漆成绿色)

    2 回复  |  直到 6 年前
        1
  •  1
  •   Temani Afif    6 年前

    font-size font-family w

    p {
      font-size: 30px;
      background: 
         linear-gradient(to right, black 50%, green 50%,green 67%,#000 67%);
      display: inline-block;
      background-clip: text;
      color: transparent;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
    <p>Hello world</p>
        2
  •  2
  •   dippas    6 年前

    span w

    p span {
      color: lightgreen
    }
    
    div::first-letter {
      color: red
    }
    <p>Hello <span>w</span>orld</p>
    
    <div>Hello world</div>