Html 使用单个粗体字符串向段落添加页边空白

<p><strong>This is a heading. I want to apply some CSS to this line of text</strong></p>
<p>But I don't want it applied here<strong>or here</strong> because this a paragraph.</p>

p:has(strong:only-child) {
    margin-top: 20px;
}

document.querySelectorAll('p').forEach(p => {
  // exclude empty <p> or <p> is not has <strong>
  if (!p.hasChildNodes() || !p.querySelector('strong')) { 
    return;
  }
  const childNodes = p.childNodes;
  // check whitespace
  if (childNodes[0].nodeType === Node.TEXT_NODE || childNodes[childNodes.length - 1].nodeType === Node.TEXT_NODE) {
    p.innerHTML = p.innerHTML.trim();
  }
  if (childNodes.length === 1 && p.childNodes[0].nodeName === 'STRONG' && p.childNodes[0].textContent.trim()) {
    p.style.marginBlockStart = '20px';
  }
})

* {
  margin: 0;
}

<p> <strong>This is a heading with whitespace</strong></p>
<p>But I don't want it applied here<strong>or here</strong> because this is a paragraph.</p>
<p><strong>This is a heading</strong></p>
<p>Lorem ipsum dolor sit amet.</p>
<p><strong></strong></p>
<p>Lorem ipsum dolor sit amet.</p>

Html相关问答推荐

Angular Project中的星级 Select

如何影响flex项目中的flex-gap收缩顺序和文本换行顺序？

穿过整个屏幕的旋转线

carousel 的垂直滚动按钮居中

将文本保持在平行四边形内并遵循形状

如何从通过 find-each 方法(在 Rails 应用程序中)生成的列表创建下拉菜单？

按钮位于主 div 的底部而不是内部 Div

R 中的网页抓取数字？

当我将有序列表居中时，数字会跑到列表的另一行

更改标签标签的大小

什么没有 margin-right 和 width：100% 溢出子元素到左边？

在 SQL 中合并 HTML 表中的单元格

在 jinja 模板内的 html 表中嵌套 For 循环

使用 TailwindCSS 将徽标放在左上角，将菜单放在右上角

使用 CSS 样式化进度条

CSS 网格自动高度不适用于特定网格区域

html tailwindcss 给 li 标签添加边框

如何在不删除

标记的情况下加入 HTML 中的段落

是否可以使用纯 css 创建具有斜角效果的锯齿形边缘？

调整窗口大小时试图阻止按钮移动