Question

从降价转换后，我希望能够为我的li列表项设置样式，而不必对其进行标记。

具体来说：当列表项形成为键值对时，我想使其成为第一部分。

视觉结果应类似于以下内容：

<ul>
    <li><strong>key: </strong>value</li>
</ul>

那么，有没有一种方法可以选择li项内的字符串，直到冒号？

Answer 1

仅在CSS中是不可能的，但是部署一段用key:围绕文本<span>的javascript代码段非常简单：

<li><span class="key">key:</span> value</li>

然后使您可以设置文本的那部分样式。

工作示例：

const myList = document.getElementsByTagName('ul')[0];
const myListItems = myList.getElementsByTagName('li');

for (let i = 0; i < myListItems.length; i++) {

  let myListItemColonPosition = myListItems[i].textContent.indexOf(':')

  markup = '';
  markup += '<span class="my-key">';
  markup += myListItems[i].textContent.substring(0, myListItemColonPosition);
  markup += '</span>';
  markup += myListItems[i].textContent.substring(myListItemColonPosition);
  
  myListItems[i].innerHTML = markup;
  
}

li {
  font-size: 16px;
  line-height: 24px;
}

.my-key {
  font-weight: 700;
}

<ul>
<li>key0: value0</li>
<li>key1: value1</li>
<li>key2: value2</li>
<li>key3: value3</li>
<li>key4: value4</li>
</ul>

有没有一种方法可以使用CSS选择最多一个特定字符的字符串？

1 个答案: