禁用空间

Question

我有以下HTML代码：

.meta {
  user-select: none; 
}

.meta + .bash::first-letter {
  user-select: none;
  background-color: #ff0000;
}

<span class="meta">$</span>
<span class="bash"> ls</span>

现在我希望用户能够选择ls，而不是$（包括空格）。

虽然这适用于$字符，但它不适用于后面的空格。为什么不？我的选择器出了什么问题？

PS：我对HTML代码没有影响，我的仅选项是对CSS进行更改。

Answer 1

试试这个，在@ ajreal的评论中创建。

＆＃13;

＆＃13;

.meta {
  user-select: none;
}
.bash{
  display: inline-block;
}
.meta:after {
  content: '\00a0';
}

＆＃13;

<span class="meta">$</span><span class="bash"> ls</span>

＆＃13;

＆＃13;

＆＃13;

Answer 2

首先，::first-letter选择器仅适用于块容器盒（不会对内联元素起作用）。

其次，它似乎无法选择空间。如果您将跨度设置为inline-blocks，则第一个变为红色的字母仍为＆＃34; l＆＃34;而不是空间。

＆＃13;

＆＃13;

.meta, .bash {
  display: inline-block;
}

.meta {
  user-select: none; 
}

.meta + .bash::first-letter {
  user-select: none;
  background-color: #ff0000;
}

＆＃13;

<span class="meta">$</span>
<span class="bash"> ls</span>

＆＃13;

＆＃13;

＆＃13;