使用p::first-letter后p::selection无法选中首字母的解决方法

当使用p::first-letter后，p::selection无法作用于首字母，且CSS不允许嵌套多个伪元素（比如p::first-letter::selection），可以用以下两种方式解决：

• 方案一：用HTML元素包裹首字母
  把段落的首字母用一个<span>标签单独包裹，然后分别给段落和这个span设置选中样式，就能实现统一的选中效果。

  示例代码：
  HTML：

  <p><span class="first-letter">H</span>ello, this is a sample paragraph with styled first letter.</p>
  

  CSS：

  /* 原来给::first-letter的样式，现在移到span上 */
  .first-letter {
    font-size: 2.5em;
    float: left;
    margin-right: 8px;
    color: #2c3e50;
  }
  
  /* 统一设置选中样式 */
  p::selection, .first-letter::selection {
    background: #f39c12;
    color: #fff;
  }
  

• 方案二：尝试兼容现代浏览器的嵌套伪元素写法
  部分现代浏览器（如Chrome、Firefox最新版）已经支持::first-letter::selection这种嵌套写法，你可以直接尝试：

  p::first-letter {
    font-size: 2.5em;
    float: left;
    margin-right: 8px;
    color: #2c3e50;
  }
  
  p::selection {
    background: #f39c12;
    color: #fff;
  }
  
  /* 单独给首字母设置选中样式，和段落保持一致 */
  p::first-letter::selection {
    background: #f39c12;
    color: #fff;
  }
  

  注意：这种写法兼容性不如方案一，旧版浏览器可能不支持。

内容的提问来源于stack exchange，提问作者KolyaKovt