javascript - 段落标记内的 CSS 样式仅文本

Question

我有一页文字，它的格式与此类似

<div class="container">
    <p style="text-align: center;">
        <span style="text-decoration: underline;">
            <strong>
                <img src="//cdn.shopify.com/s/files/1/0652/9219/files/Horizontal.jpg?13817493546805475501" alt="">
            </strong>
        </span>
    </p>
    <p style="text-align: center;">
        <span style="text-decoration: underline;">
            <strong>The Hosting</strong>
        </span>
    </p>
    <p>
        The in-laws are arriving, friends are in town, and everyone is heading to your abode for a night filled with holiday cheer. As stress levels tend to rise during these events, expenses do as well. Here are a few tips to nail your hostess game, without breaking the bank and <em>still</em> shopping consciously. 
    </p>
</div>

我希望保持适合类容器的整个内容宽度的图像相同，但只将段落标记中的文本更改为更小的宽度(因此它看起来两边都缩进)或有边距但完全不影响图像。我无法更改代码的输出方式，因此图像将始终包含在段落标记中。

此代码是内容页面上的一个小示例，其中包含多个图像和文本。

所以基本上我正在寻找一种在 css 中仅设置段落标签中的实际文本样式并保持图像不变的方法。任何帮助都会很棒。

这是一个 fiddle 示例:https://jsfiddle.net/jpautt8v/

Answer 1

如果您的 html 是静态的，或者如果您知道要修改哪个子项，那么您可以简单地使用第 n 个子项 css 选择器来应用 css，如下例代码示例中的第 3 个。您可以玩转边际，看看什么最适合您的解决方案。

p:nth-child(3) 
{
   margin: 0 50px; 
}