是否可以使用纯CSS在一个跨度中找到一个字符并设置其样式?

时间:2019-05-31 14:26:45

标签: css css-selectors

我认为这里的答案是“否”,但是有时可能会折磨css3伪选择器的一些技巧,使其接近魔术。

我想在跨度中查找和设置句点字符的样式。不要问为什么,上下文很荒谬。可悲的是,不能每次都依赖角色存在于同一位置,因此必须找到它。我认为如果没有JS,就无法完成,但想确认一下。

1 个答案:

答案 0 :(得分:1)

总的来说...,但是您可以将每个字符包装在一个元素中,然后可以对其进行样式设置。

可以使用一小段JS来完成此操作。

const el = document.querySelector("#find-periods");
el.innerHTML = el.innerHTML.replace(/\./g, '<span class="char-period">.</span>')
.char-period{ color: red; font-size: 30px; }
<p id="find-periods">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vitae tristique massa, ut convallis risus. Vestibulum maximus sed libero ut lacinia. Integer vel mollis ex. Nullam mattis ipsum in massa aliquet pharetra eget nec enim. In vitae sem at nibh mollis finibus. Quisque id pretium velit. Donec nec augue volutpat, sodales dui id, eleifend augue. Nulla lobortis congue est ut venenatis. Ut mollis nisi ac purus auctor, nec sollicitudin mi vestibulum. Integer tincidunt, metus sit amet euismod porta, nisl nisi accumsan lectus, id lacinia nunc arcu vitae massa. Nunc et tellus ante. In mattis ex sed sem hendrerit elementum. Ut leo libero, convallis sit amet massa et, tincidunt malesuada augue. Pellentesque consectetur maximus maximus. Duis suscipit dolor risus, sed egestas libero iaculis ac. Phasellus consectetur quam ipsum, in finibus leo fringilla a.
</p>