如何<strong>通过 css</strong>检查列表是否包含第一个元素

Question

 <div class="container"> <ul> <li class="info">Testing Bold text in custom bullets</li> <li class="info"><strong>Testing</strong> Bold text in custom bullets</li> <li class="info">Testing <strong>Bold</strong> text in custom bullets</li> <li class="info">Testing Bold <strong>text</strong> in custom bullets</li> <li class="info">Testing Bold text <strong>in</strong> custom bullets</li> <li class="info">Testing Bold text in <strong>custom</strong> bullets</li> <li class="info">Testing Bold text in custom <strong>bullets</strong></li> <li class="info">Testing Bold text in custom bullets</li> </ul> </div>

上面 HTML 是动态生成的，如果<strong>在li中首先出现（例如第二个<li> ），那么我只需要做一些样式。

您能否告知是否可以通过 CSS 或其他替代方法实现？

Answer 1

CSS 并不是真正为这种情况而设计的，但 JavaScript 是可能的。

真正最好的办法是更语义化地构建 HTML，并在需要的地方使用 class。

但是由于您正在动态生成 HTML 并且无法控制 output，因此这是一个带有 JS 的解决方案。

 document.querySelectorAll('ul li').forEach(element => { if (element.innerHTML.startsWith('<strong>') ) { element.querySelector('strong').style = 'color:red' } })

 <div class="container"> <ul> <li class="info">Testing Bold text in custom bullets</li> <li class="info"><strong>Testing</strong> Bold text in custom bullets</li> <li class="info">Testing <strong>Bold</strong> text in custom bullets</li> <li class="info">Testing Bold <strong>text</strong> in custom bullets</li> <li class="info">Testing Bold text <strong>in</strong> custom bullets</li> <li class="info">Testing Bold text in <strong>custom</strong> bullets</li> <li class="info">Testing Bold text in custom <strong>bullets</strong></li> <li class="info">Testing Bold text in custom bullets</li> </ul> </div>

Answer 2

使用 javascript 您可以检查每个<li>的第一个节点并对其应用 class 或内联样式

以下还说明了由于 html 中的换行导致的空文本节点

 document.querySelectorAll('.container li').forEach(el => { let firstNode = el.childNodes[0]; // account for empty text nodes while (firstNode.nodeType === 3 &&.firstNode.textContent.trim()) { firstNode = firstNode.nextSibling } if (firstNode.nodeName === 'STRONG') { firstNode.classList.add('first-bold') } })

 .first-bold { color: red }

 <div class="container"> <ul> <li class="info">Testing Bold text in custom bullets</li> <li class="info"><strong>Testing</strong> Bold text in custom bullets</li> <li class="info">Testing <strong>Bold</strong> text in custom bullets</li> <li class="info">Testing Bold <strong>text</strong> in custom bullets</li> <li class="info">Testing Bold text <strong>in</strong> custom bullets</li> <li class="info"> <strong>Testing</strong> Bold text in <strong>custom</strong> bullets </li> <li class="info">Testing Bold text in custom <strong>bullets</strong></li> <li class="info"> Testing Bold text in custom bullets</li> </ul> </div>

Answer 3

ul li:first-child strong {... }会成功的。

对不起，我看错了你的问题。 据我所知，在 CSS 中你想要做的实际上是不可能的。 最好的办法是让任何生成 HTML 的东西添加一个 class ，当它在列表项的开头放置一个<strong>元素时，它具有您想要的样式。

Answer 4

您可以应用以下样式表来识别具有强标签的第一个孩子：

li:first-child > strong {
  background-color: yellow;
}