如何在不影响同一 class 中的其他段落的情况下设置 css 中特定段落元素的样式？

Question

我正在尝试设置第 5 行中出现的段落元素的样式（列出您的家属....吸烟习惯），但由于某些原因，它会影响同一 class 中出现的其他段落元素。我只想设置第 5 行（段落元素）的样式，而不影响同一 class 中存在的其他段落元素。

<div class="inter">
<div class="dependents">

    <h2 class="my-life-events ttl"><!-- ko i18n: 'enrollNow.dependents' -->My dependents<!-- /ko --></h2>
    <p>List your dependents and enter their personal information. Pay close attention to information regarding your spouse’s smoking habits</p>


<div class="section header single">
    <div class="inter">
        <!-- ko i18n:'dependents' -->Dependents<!-- /ko -->
        <div class="info header-sections" data-bind="popup: {
                    popupId: 'info-popup',
                    closeOnOutsideClick: true,
                    vm: {title: '', message: depend_info[locale.selected_locale()]}
                }"></div>
    </div>
</div>

<div class="section single">
    <div class="inter">
        <table cellspacing="0" cellpadding="0" class="table title">
            <tbody><tr>
                <td class="cell1"><!-- ko i18n:'dependents.name' -->Name<!-- /ko --></td>
                <td class="cell2"><!-- ko i18n:'dependents.type' -->Type<!-- /ko --></td>
                <td class="cell3"><!-- ko i18n:'dependents.status' -->Status<!-- /ko --></td>
                <td class="cell4 last"></td>
            </tr>
            </tbody><tbody data-bind="foreach: dependents"></tbody>
        </table>
        <!-- ko ifnot: pendingApproval || viewReadonlyBenefits-->
        <table cellspacing="0" cellpadding="0" class="table">
            <tbody><tr data-bind="css:{hidden: dependents().length != 0}" class=""><td colspan="3" class="cell-common"><!--ko i18n: 'dependents.no.dependent' -->There is no dependent registered in your file<!--/ko--></td></tr>
            <tr>
                <!-- ko if: showAddButton() --><!-- /ko -->
           </tr>
        </tbody></table>
        <!-- /ko -->
    </div>
</div>


<div class="inter-note">   
    <br>
    <h4><!-- ko i18n: 'life.note' -->Note<!-- /ko --></h4>
    <!-- ko ifnot: showAddButton() -->    
    <p><span data-bind="html: i18n('microsite.dependents.note.text1')">To add/remove a dependent or to modify your spouse's insurer information, go to the <a href="#home/life-events">My life events</a> section and follow the instructions.</span></p>
    <!-- /ko -->
    <p>
        <span data-bind="html: i18n('microsite.dependents.note.text2')">To modify your beneficiaries, please complete and sign the </span>
        <a data-bind="text: i18n('microsite.dependents.note.text3'), attr:{href: vm.home.beneficiaryLink()}" target="_blank" href="">Beneficiary designation</a>
        <span data-bind="html: i18n('microsite.dependents.note.text4')"> form and return it to your plan administrator.</span>
    </p>

</div>



</div>    
</div>

我尝试使用以下代码，但它仍然影响 class 中存在的整个段落元素。

.dependents p
{
/* styles */
}


div.dependents p
{
/* styles */
}

Answer 1

尝试选择 .dependents 的直系后代，如下所示：

div.dependents > p { /* styles */ }

Answer 2

如果您只在 p 元素上将其作为 .dependant 的直接后代，则可以执行 .dependant > p

Answer 3

我认为你的意思是，只影响直系后代，你可以按照以下规则这样做：

.dependents > p
{
/* styles */
}

Answer 4

如果您希望特定段落的样式明显，您应该为其指定一个 class。如果由于某种原因你不能这样做（例如，如果你不能更改 HTML 但可以编辑 CSS），你可以通过使用同级 select或：

.my-life-events + p {
   /* your code here */
}

这将 select 只有直接跟在带有 class .my-life-events 的元素之后的段落。

Answer 5

您的问题来自对 class 用法的误解。

.dependents p 
{
    /* styles */
}

此代码应解释为：

作为包含 class "dependents" 的元素的子元素（或子子元素）的每个元素  都将具有大括号内的样式。

如 "junkfoodjunkie"、"rorymorris89" 或 "sergio0983"，如果您希望样式仅适用于直接后代，您应该使用：

.dependents > p
{
    /* styles */
}

这意味着只会设置直接子  元素的样式，而不是子子元素。

但是，如果您只想在元素  上获得特定样式，为什么不只对这个特定元素  使用新的 class 呢？

您的代码应该是：

<div class="inter">
    <div class="dependents">
        <h2 class="my-life-events ttl"><!-- ko i18n: 'enrollNow.dependents' -->My dependents<!-- /ko --></h2>
        <p class="my-paragraph-style">List your dependents and enter their personal information. Pay close attention to information regarding your spouse’s smoking habits</p>

和css：

.dependents p.my-paragraph-style
{
    /* style */
}

此致，
特里斯坦.

Answer 6

你也可以使用 span 并给它一个 class

<div class="dependents"> List your dependents and enter their personal information. Pay close attention to information regarding your spouse’s smoking habits

此外，如果您愿意，您也可以只设置特定单词的样式

<div class="dependents">
<p><span class="only-style-this">List your dependents </span> 
 and enter their personal information. Pay close attention 
 to information regarding your spouse’s smoking habits</p>

span 不会将该内容定义为文档中的新块级元素。内容仍然是元素的一部分。

如何在不影响同一 class 中的其他段落的情况下设置 css 中特定段落元素的样式？

How to style a particular paragraph element in css without effecting the other paragraphs in the same class?

html

css

inheritance

parent-child