如何在应用 css 时排除 p 标签内的跨度

Question

我的 html 是这样的：

<div class="instructions">
  <h2>Heading</h2>
  <p><span>Step 1: </span>This is step 1</p>
  <p><span>Step 2: </span>This is step 2</p>
  <p><span>Step 3: </span>This is step 3</p>
  <p><span>Step 4: </span>This is step 4<p>
</div>

我想要实现的是在 p 内的文本上应用 text-decoration: underline; 但不在 span.

上应用

我已经尝试使用 :not() 选择器并应用继承，但无法获得预期的结果。

Answer 1

制作跨度display:inline-block

p {
  text-decoration: underline;
}

span {
  display: inline-block;
}

<div class="instructions">
  <h2>Heading</h2>
  <p><span>Step 1: </span>This is step 1</p>
  <p><span>Step 2: </span>This is step 2</p>
  <p><span>Step 3: </span>This is step 3</p>
  <p><span>Step 4: </span>This is step 4
    <p>
</div>

如何在应用 css 时排除 p 标签内的跨度

How do I exclude span inside p tag while applying css

html

css

css-selectors