我正在尝试设置第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 */
}
您的问题来自对类用法的错误理解。
.dependents p
{
/* styles */
}
此代码应解释为：
<p>作为包含“ depends”类的元素的子元素（或子元素）的每个元素在花括号内均具有样式。
如说“ junkfoodjunkie”，“ rorymorris89”或“ sergio0983”，如果您希望该样式仅适用于直接后代，则应使用：
.dependents > p
{
/* styles */
}
这意味着将仅对直接子<p>元素进行样式设置，而不对子子元素进行样式设置。
但是，如果您希望仅在元素<p>上具有特定样式，那么为什么不只为该特定元素使用新类<p>呢？
您的代码应为：
<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 */
}
最好的问候，
特里斯坦。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句