Question

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

<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>

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

.dependents p
{
/* styles */
}


div.dependents p
{
/* styles */
}

Answer 1

你的问题来自对课堂使用的误解。

.dependents p 
{
    /* styles */
}

此代码应解释为：

作为包含“dependents”类的元素的子（或子子）的每个元素都将具有花括号内的样式。

如说“junkfoodjunkie”，“rorymorris89”或“sergio0983”，如果您希望该风格仅适用于直系后代，您应该使用：

.dependents > p
{
    /* styles */
}

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

但是如果你想只在元素上得到一个特定的样式，为什么不为这个特定元素使用一个新类？

您的代码应为：

<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 2

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

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

Answer 3

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

Answer 4

我认为你的意思是，只影响直系后代，你可以遵循以下规则：

.dependents > p
{
/* styles */
}

Answer 5

如果您希望明确设置特定段落的样式，则应为其指定一个自己的类。如果由于某种原因你不能这样做（例如，如果你不能改变HTML但可以编辑CSS），你可以通过使用兄弟选择器最好地挑出这一段：

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

这将仅选择直接跟随类.my-life-events的元素的段落。

Answer 6

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

<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不会将该内容定义为文档中的新块级元素。内容仍然是元素的一部分。

如何在css中设置特定段落元素的样式而不影响同一个类中的其他段落？

6 个答案: