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

Question

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

\n\n

<div class="inter">\n<div class="dependents">\n\n    <h2 class="my-life-events ttl"><!-- ko i18n: \'enrollNow.dependents\' -->My dependents<!-- /ko --></h2>\n    <p>List your dependents and enter their personal information. Pay close attention to information regarding your spouse\xe2\x80\x99s smoking habits</p>\n\n\n<div class="section header single">\n    <div class="inter">\n        <!-- ko i18n:\'dependents\' -->Dependents<!-- /ko -->\n        <div class="info header-sections" data-bind="popup: {\n                    popupId: \'info-popup\',\n                    closeOnOutsideClick: true,\n                    vm: {title: \'\', message: depend_info[locale.selected_locale()]}\n                }"></div>\n    </div>\n</div>\n\n<div class="section single">\n    <div class="inter">\n        <table cellspacing="0" cellpadding="0" class="table title">\n            <tbody><tr>\n                <td class="cell1"><!-- ko i18n:\'dependents.name\' -->Name<!-- /ko --></td>\n                <td class="cell2"><!-- ko i18n:\'dependents.type\' -->Type<!-- /ko --></td>\n                <td class="cell3"><!-- ko i18n:\'dependents.status\' -->Status<!-- /ko --></td>\n                <td class="cell4 last"></td>\n            </tr>\n            </tbody><tbody data-bind="foreach: dependents"></tbody>\n        </table>\n        <!-- ko ifnot: pendingApproval || viewReadonlyBenefits-->\n        <table cellspacing="0" cellpadding="0" class="table">\n            <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>\n            <tr>\n                <!-- ko if: showAddButton() --><!-- /ko -->\n           </tr>\n        </tbody></table>\n        <!-- /ko -->\n    </div>\n</div>\n\n\n<div class="inter-note">   \n    <br>\n    <h4><!-- ko i18n: \'life.note\' -->Note<!-- /ko --></h4>\n    <!-- ko ifnot: showAddButton() -->    \n    <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>\n    <!-- /ko -->\n    <p>\n        <span data-bind="html: i18n(\'microsite.dependents.note.text2\')">To modify your beneficiaries, please complete and sign the </span>\n        <a data-bind="text: i18n(\'microsite.dependents.note.text3\'), attr:{href: vm.home.beneficiaryLink()}" target="_blank" href="">Beneficiary designation</a>\n        <span data-bind="html: i18n(\'microsite.dependents.note.text4\')"> form and return it to your plan administrator.</span>\n    </p>\n\n</div>\n\n\n\n</div>    \n</div>\n

\n\n

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

\n\n

.dependents p\n{\n/* styles */\n}\n\n\ndiv.dependents p\n{\n/* styles */\n}\n

\n

Answer 1

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

\n\n

.dependents p \n{\n    /* styles */\n}\n

\n\n

这段代码应该被解释为：

\n\n

每个元素<p>都将具有大括号内的样式。

\n\n

正如“junkfoodjunkie”、“rorymorris89”或“sergio0983”所说，如果您希望该样式仅适用于直系后代，您应该使用：

\n\n

.dependents > p\n{\n    /* styles */\n}\n

\n\n

这意味着只有直接子<p>元素才会被设置样式，而不是子子元素。

\n\n

但是，如果您希望仅在元素上<p>获得特定样式，为什么不只为该特定元素使用新类呢<p>？

\n\n

你的代码应该是：

\n\n

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

\n\n

和CSS：

\n\n

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

\n\n

最好的问候，
\n特里斯坦。

\n