英文:
How can I display border from the correct division?
问题
我需要从第10个div元素开始应用CSS。我需要从第10个div元素的bfaText元素开始边框。我不确定为什么它从第5个div元素开始。我已经添加了CSS .bfaText:nth-child(n + 10),但它不起作用,不确定我做错了什么。我找不到这个问题的根本原因。需要帮助。
.bfaText:nth-child(n + 10) {
border: 2px solid orange;
margin-bottom: 1px;
padding-left: 10px;
}
以上是您要的翻译部分,不包括代码部分。
英文:
I need to apply CSS from 10th div element. I've to start bordering from 10th div.bfaText element. I'm not sure why it its starting from 5th div element. I've also added CSS .bfaText:nth-child(n + 10) but its not working, not sure what wrong am I doing. I'm unable to find the root cause for this. Need an help on this.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.bfaText:nth-child(n + 10) {
border: 2px solid orange;
margin-bottom: 1px;
padding-left:10px;
}
li:nth-child(even) {
background-color: lightyellow;
}
<!-- language: lang-html -->
<div _ngcontent-tpq-c266="" class="lmn-pt-5 lmn-pb-5 crListDivision ng-star-inserted">
<div _ngcontent-tpq-c266="" class="lmn-row lmn-mx-0 ng-star-inserted">
<ul _ngcontent-tpq-c266="" class="lmn-list-group lmn-list-group-initial ng-star-inserted">
<li _ngcontent-tpq-c266="" class="lmn-list-group-item lmn-list-group-item-noinitial lmn-font-weight-bold" style="font-size: 12px !important;">TSPM Metadata Validation (01)</li>
<ol _ngcontent-tpq-c266="" class="lmn-list-group lmn-list-group-initial">
<li _ngcontent-tpq-c266="" class="lmn-list-group-item crList ng-star-inserted">
<a _ngcontent-tpq-c266="" target="_blank" placement="top" ng-reflect-placement="top" href="" ng-reflect-mt-tooltip="10007127">
CR IN 10007127
</a>
<!--container-->
</li>
<!--bindings={
"ng-reflect-ng-if-else": "[object Object]"
}-->
<div _ngcontent-tpq-c266="" class="lmn-pb-2 lmn-font-size-xs bfaText ng-star-inserted"></div>
<!--ng-container--><!--bindings={
"ng-reflect-ng-for-of": "[object Object]"
}-->
</ol>
</ul>
<!--ng-container-->
<ul _ngcontent-tpq-c266="" class="lmn-list-group lmn-list-group-initial ng-star-inserted">
<li _ngcontent-tpq-c266="" class="lmn-list-group-item lmn-list-group-item-noinitial lmn-font-weight-bold" style="font-size: 12px !important;">TSPM Process Connector Validation (19)</li>
<ol _ngcontent-tpq-c266="" class="lmn-list-group lmn-list-group-initial">
<li _ngcontent-tpq-c266="" class="lmn-list-group-item crList ng-star-inserted">
<a _ngcontent-tpq-c266="" target="_blank" placement="top" ng-reflect-placement="top" href="" ng-reflect-mt-tooltip="10007128">
CR IN 10007128
</a>
<!--container-->
</li>
<!--bindings={
"ng-reflect-ng-if-else": "[object Object]"
}-->
<div _ngcontent-tpq-c266="" class="lmn-pb-2 lmn-font-size-xs bfaText ng-star-inserted">Optima Retail | R06.71.1-Calculate Expected and Unexpected Loss by Portfolio | FUNC001561-Numeric Reference Capturing</div>
<!--ng-container-->
<li _ngcontent-tpq-c266="" class="lmn-list-group-item crList ng-star-inserted">
<a _ngcontent-tpq-c266="" target="_blank" placement="top" ng-reflect-placement="top" href="" ng-reflect-mt-tooltip="10007123">
CR IN 10007123
</a>
<!--container-->
</li>
<!--bindings={
"ng-reflect-ng-if-else": "[object Object]"
}-->
<div _ngcontent-tpq-c266="" class="lmn-pb-2 lmn-font-size-xs bfaText ng-star-inserted">Manual | R06.71.10-Review Categorization and Record Overrides | FUNC001141-Hedging Monitoring</div>
<!--ng-container-->
<li _ngcontent-tpq-c266="" class="lmn-list-group-item crList ng-star-inserted">
<a _ngcontent-tpq-c266="" target="_blank" placement="top" ng-reflect-placement="top" href="" ng-reflect-mt-tooltip="10007125">
CR IN 10007125
</a>
<!--container-->
</li>
<!--bindings={
"ng-reflect-ng-if-else": "[object Object]"
}-->
<div _ngcontent-tpq-c266="" class="lmn-pb-2 lmn-font-size-xs bfaText ng-star-inserted">Manual | R06.71.11-Finalize Categorization | FUNC001142-Hedging Strategy Determination</div>
<!--ng-container-->
<li _ngcontent-tpq-c266="" class="lmn-list-group-item crList ng-star-inserted">
<a _ngcontent-tpq-c266="" target="_blank" placement="top" ng-reflect-placement="top" href="" ng-reflect-mt-tooltip="10007118">
CR IN 10007118
</a>
<!--container-->
</li>
<!--bindings={
"ng-reflect-ng-if-else": "[object Object]"
}-->
<div _ngcontent-tpq-c266="" class="lmn-pb-2 lmn-font-size-xs bfaText ng-star-inserted">Manual | R06.71.12-Generate 360 Metrics Dashboard | FUNC001328-Legal Entity Requested</div>
<!--ng-container-->
<li _ngcontent-tpq-c266="" class="lmn-list-group-item crList ng-star-inserted">
<a _ngcontent-tpq-c266="" target="_blank" placement="top" ng-reflect-placement="top" href="" ng-reflect-mt-tooltip="10007122">
CR IN 10007122
</a>
<!--container-->
</li>
<!--bindings={
"ng-reflect-ng-if-else": "[object Object]"
}-->
<div _ngcontent-tpq-c266="" class="lmn-pb-2 lmn-font-size-xs bfaText ng-star-inserted">CitiRisk Retail | R06.71.13-Monitor Concentration Risk, Other Portfolio Limits &amp; Breaches | FUNC001329-Legal Judgment</div>
<!--ng-container-->
<li _ngcontent-tpq-c266="" class="lmn-list-group-item crList ng-star-inserted">
<a _ngcontent-tpq-c266="" target="_blank" placement="top" ng-reflect-placement="top" href="" ng-reflect-mt-tooltip="10007109">
CR IN 10007109
</a>
<!--container-->
</li>
<!--bindings={
"ng-reflect-ng-if-else": "[object Object]"
}-->
<div _ngcontent-tpq-c266="" class="lmn-pb-2 lmn-font-size-xs bfaText ng-star-inserted">Manual | R06.71.13-Monitor Concentration Risk, Other Portfolio Limits &amp; Breaches | FUNC001329-Legal Judgment</div>
<!--ng-container-->
<li _ngcontent-tpq-c266="" class="lmn-list-group-item crList ng-star-inserted">
<a _ngcontent-tpq-c266="" target="_blank" placement="top" ng-reflect-placement="top" href="" ng-reflect-mt-tooltip="10007115">
CR IN 10007115
</a>
<!--container-->
</li>
<!--bindings={
"ng-reflect-ng-if-else": "[object Object]"
}-->
<div _ngcontent-tpq-c266="" class="lmn-pb-2 lmn-font-size-xs bfaText ng-star-inserted">
Manual | R06.71.14-Perform Balanced Scorecarding &amp; Breach Detection | FUNC001330-Legal Opinion and Comfort Letter Drafting and Negotiation
</div>
<!--ng-container-->
<li _ngcontent-tpq-c266="" class="lmn-list-group-item crList ng-star-inserted">
<a _ngcontent-tpq-c266="" target="_blank" placement="top" ng-reflect-placement="top" href="" ng-reflect-mt-tooltip="10007106">
CR IN 10007106
</a>
<!--container-->
</li>
<!--bindings={
"ng-reflect-ng-if-else": "[object Object]"
}-->
<div _ngcontent-tpq-c266="" class="lmn-pb-2 lmn-font-size-xs bfaText ng-star-inserted">Manual | R06.71.2-Allocate Finance Balances | FUNC001562-Obligor Risk Rating Determination</div>
<!--ng-container-->
<li _ngcontent-tpq-c266="" class="lmn-list-group-item crList ng-star-inserted">
<a _ngcontent-tpq-c266="" target="_blank" placement="top" ng-reflect-placement="top" href="" ng-reflect-mt-tooltip="10007124">
CR IN 10007124
</a>
<!--container-->
</li>
<!--bindings={
"ng-reflect-ng-if-else": "[object Object]"
}-->
<div _ngcontent-tpq-c266="" class="lmn-pb-2 lmn-font-size-xs bfaText ng-star-inserted">
GENESIS - North America Core | R06.71.3-Input Portfolio Data and Check for Completeness | FUNC001128-Greenlight or Round Table Meeting
</div>
<!--ng-container-->
<li _ngcontent-tpq-c266="" class="lmn-list-group-item crList ng-star-inserted">
<a _ngcontent-tpq-c266="" target="_blank" placement="top" ng-reflect-placement="top" href="" ng-reflect-mt-tooltip="10007126">
CR IN 10007126
</a>
<!--container-->
</li>
<!--bindings={
"ng-reflect-ng-if-else": "[object Object]"
}-->
<div _ngcontent-tpq-c266="" class="lmn-pb-2 lmn-font-size-xs bfaText ng-star-inserted">CitiRisk Retail | R06.71.3-Input Portfolio Data and Check for Completeness | FUNC001128-Greenlight or Round Table Meeting</div>
<!--ng-container-->
<li _ngcontent-tpq-c266="" class="lmn-list-group-item crList ng-star-inserted">
<a _ngcontent-tpq-c266="" target="_blank" placement="top" ng-reflect-placement="top" href="" ng-reflect-mt-tooltip="10007119">
CR IN 10007119
</a>
<!--container-->
</li>
<!--bindings={
"ng-reflect-ng-if-else": "[object Object]"
}-->
<div _ngcontent-tpq-c266="" class="lmn-pb-2 lmn-font-size-xs bfaText ng-star-inserted">Manual | R06.71.3-Input Portfolio Data and Check for Completeness | FUNC001128-Greenlight or Round Table Meeting</div>
<!--ng-container-->
<li _ngcontent-tpq-c266="" class="lmn-list-group-item crList ng-star-inserted">
<a _ngcontent-tpq-c266="" target="_blank" placement="top" ng-reflect-placement="top" href="" ng-reflect-mt-tooltip="10007121">
CR IN 10007121
</a>
<!--container-->
</li>
<!--bindings={
"ng-reflect-ng-if-else": "[object Object]"
}-->
<div _ngcontent-tpq-c266="" class="lmn-pb-2 lmn-font-size-xs bfaText ng-star-inserted">
Enterprise Data Warehouse (EDW) - APAC | R06.71.4-Conduct Data Quality Checks | FUNC001129-Greenshoe Option Exercise and Disclosures
</div>
</ol>
</ul>
<!--ng-container-->
</div>
</div>
<!-- end snippet -->
答案1
得分: 2
因为当你使用nth-child代码时,你会计算ol元素的所有子元素,我建议你使用nth-of-type而不是nth-child,它可以按类型计算元素
.bfaText:nth-of-type(n + 10) {
border: 2px solid orange;
margin-bottom: 1px;
padding-left: 10px;
}
li:nth-of-type(even) {
background-color: lightyellow;
}
<div _ngcontent-tpq-c266="" class="lmn-pt-5 lmn-pb-5 crListDivision ng-star-inserted">
<div _ngcontent-tpq-c266="" class="lmn-row lmn-mx-0 ng-star-inserted">
<ul _ngcontent-tpq-c266="" class="lmn-list-group lmn-list-group-initial ng-star-inserted">
<li _ngcontent-tpq-c266="" class="lmn-list-group-item lmn-list-group-item-noinitial lmn-font-weight-bold" style="font-size: 12px !important;">TSPM Metadata Validation (01)</li>
<ol _ngcontent-tpq-c266="" class="lmn-list-group lmn-list-group-initial">
<li _ngcontent-tpq-c266="" class="lmn-list-group-item crList ng-star-inserted">
<a _ngcontent-tpq-c266="" target="_blank" placement="top" ng-reflect-placement="top" href="" ng-reflect-mt-tooltip="10007127">
CR IN 10007127
</a>
</li>
<!--其他内容-->
</ol>
</ul>
<!--其他内容-->
</div>
</div>
请注意,我只翻译了你要求的部分,没有包括其他内容。
英文:
because when you use nth-child code you count all child of ol element I suggest you to use nth-of-type instead of nth-child that can count elements by type
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.bfaText:nth-of-type(n + 10) {
border: 2px solid orange;
margin-bottom: 1px;
padding-left: 10px;
}
li:nth-of-type(even) {
background-color: lightyellow;
}
<!-- language: lang-html -->
<div _ngcontent-tpq-c266="" class="lmn-pt-5 lmn-pb-5 crListDivision ng-star-inserted">
<div _ngcontent-tpq-c266="" class="lmn-row lmn-mx-0 ng-star-inserted">
<ul _ngcontent-tpq-c266="" class="lmn-list-group lmn-list-group-initial ng-star-inserted">
<li _ngcontent-tpq-c266="" class="lmn-list-group-item lmn-list-group-item-noinitial lmn-font-weight-bold" style="font-size: 12px !important;">TSPM Metadata Validation (01)</li>
<ol _ngcontent-tpq-c266="" class="lmn-list-group lmn-list-group-initial">
<li _ngcontent-tpq-c266="" class="lmn-list-group-item crList ng-star-inserted">
<a _ngcontent-tpq-c266="" target="_blank" placement="top" ng-reflect-placement="top" href="" ng-reflect-mt-tooltip="10007127">
CR IN 10007127
</a>
<!--container-->
</li>
<!--bindings={
"ng-reflect-ng-if-else": "[object Object]"
}-->
<div _ngcontent-tpq-c266="" class="lmn-pb-2 lmn-font-size-xs bfaText ng-star-inserted"></div>
<!--ng-container-->
<!--bindings={
"ng-reflect-ng-for-of": "[object Object]"
}-->
</ol>
</ul>
<!--ng-container-->
<ul _ngcontent-tpq-c266="" class="lmn-list-group lmn-list-group-initial ng-star-inserted">
<li _ngcontent-tpq-c266="" class="lmn-list-group-item lmn-list-group-item-noinitial lmn-font-weight-bold" style="font-size: 12px !important;">TSPM Process Connector Validation (19)</li>
<ol _ngcontent-tpq-c266="" class="lmn-list-group lmn-list-group-initial">
<li _ngcontent-tpq-c266="" class="lmn-list-group-item crList ng-star-inserted">
<a _ngcontent-tpq-c266="" target="_blank" placement="top" ng-reflect-placement="top" href="" ng-reflect-mt-tooltip="10007128">
CR IN 10007128
</a>
<!--container-->
</li>
<!--bindings={
"ng-reflect-ng-if-else": "[object Object]"
}-->
<div _ngcontent-tpq-c266="" class="lmn-pb-2 lmn-font-size-xs bfaText ng-star-inserted">Optima Retail | R06.71.1-Calculate Expected and Unexpected Loss by Portfolio | FUNC001561-Numeric Reference Capturing</div>
<!--ng-container-->
<li _ngcontent-tpq-c266="" class="lmn-list-group-item crList ng-star-inserted">
<a _ngcontent-tpq-c266="" target="_blank" placement="top" ng-reflect-placement="top" href="" ng-reflect-mt-tooltip="10007123">
CR IN 10007123
</a>
<!--container-->
</li>
<!--bindings={
"ng-reflect-ng-if-else": "[object Object]"
}-->
<div _ngcontent-tpq-c266="" class="lmn-pb-2 lmn-font-size-xs bfaText ng-star-inserted">Manual | R06.71.10-Review Categorization and Record Overrides | FUNC001141-Hedging Monitoring</div>
<!--ng-container-->
<li _ngcontent-tpq-c266="" class="lmn-list-group-item crList ng-star-inserted">
<a _ngcontent-tpq-c266="" target="_blank" placement="top" ng-reflect-placement="top" href="" ng-reflect-mt-tooltip="10007125">
CR IN 10007125
</a>
<!--container-->
</li>
<!--bindings={
"ng-reflect-ng-if-else": "[object Object]"
}-->
<div _ngcontent-tpq-c266="" class="lmn-pb-2 lmn-font-size-xs bfaText ng-star-inserted">Manual | R06.71.11-Finalize Categorization | FUNC001142-Hedging Strategy Determination</div>
<!--ng-container-->
<li _ngcontent-tpq-c266="" class="lmn-list-group-item crList ng-star-inserted">
<a _ngcontent-tpq-c266="" target="_blank" placement="top" ng-reflect-placement="top" href="" ng-reflect-mt-tooltip="10007118">
CR IN 10007118
</a>
<!--container-->
</li>
<!--bindings={
"ng-reflect-ng-if-else": "[object Object]"
}-->
<div _ngcontent-tpq-c266="" class="lmn-pb-2 lmn-font-size-xs bfaText ng-star-inserted">Manual | R06.71.12-Generate 360 Metrics Dashboard | FUNC001328-Legal Entity Requested</div>
<!--ng-container-->
<li _ngcontent-tpq-c266="" class="lmn-list-group-item crList ng-star-inserted">
<a _ngcontent-tpq-c266="" target="_blank" placement="top" ng-reflect-placement="top" href="" ng-reflect-mt-tooltip="10007122">
CR IN 10007122
</a>
<!--container-->
</li>
<!--bindings={
"ng-reflect-ng-if-else": "[object Object]"
}-->
<div _ngcontent-tpq-c266="" class="lmn-pb-2 lmn-font-size-xs bfaText ng-star-inserted">CitiRisk Retail | R06.71.13-Monitor Concentration Risk, Other Portfolio Limits &amp; Breaches | FUNC001329-Legal Judgment</div>
<!--ng-container-->
<li _ngcontent-tpq-c266="" class="lmn-list-group-item crList ng-star-inserted">
<a _ngcontent-tpq-c266="" target="_blank" placement="top" ng-reflect-placement="top" href="" ng-reflect-mt-tooltip="10007109">
CR IN 10007109
</a>
<!--container-->
</li>
<!--bindings={
"ng-reflect-ng-if-else": "[object Object]"
}-->
<div _ngcontent-tpq-c266="" class="lmn-pb-2 lmn-font-size-xs bfaText ng-star-inserted">Manual | R06.71.13-Monitor Concentration Risk, Other Portfolio Limits &amp; Breaches | FUNC001329-Legal Judgment</div>
<!--ng-container-->
<li _ngcontent-tpq-c266="" class="lmn-list-group-item crList ng-star-inserted">
<a _ngcontent-tpq-c266="" target="_blank" placement="top" ng-reflect-placement="top" href="" ng-reflect-mt-tooltip="10007115">
CR IN 10007115
</a>
<!--container-->
</li>
<!--bindings={
"ng-reflect-ng-if-else": "[object Object]"
}-->
<div _ngcontent-tpq-c266="" class="lmn-pb-2 lmn-font-size-xs bfaText ng-star-inserted">
Manual | R06.71.14-Perform Balanced Scorecarding &amp; Breach Detection | FUNC001330-Legal Opinion and Comfort Letter Drafting and Negotiation
</div>
<!--ng-container-->
<li _ngcontent-tpq-c266="" class="lmn-list-group-item crList ng-star-inserted">
<a _ngcontent-tpq-c266="" target="_blank" placement="top" ng-reflect-placement="top" href="" ng-reflect-mt-tooltip="10007106">
CR IN 10007106
</a>
<!--container-->
</li>
<!--bindings={
"ng-reflect-ng-if-else": "[object Object]"
}-->
<div _ngcontent-tpq-c266="" class="lmn-pb-2 lmn-font-size-xs bfaText ng-star-inserted">Manual | R06.71.2-Allocate Finance Balances | FUNC001562-Obligor Risk Rating Determination</div>
<!--ng-container-->
<li _ngcontent-tpq-c266="" class="lmn-list-group-item crList ng-star-inserted">
<a _ngcontent-tpq-c266="" target="_blank" placement="top" ng-reflect-placement="top" href="" ng-reflect-mt-tooltip="10007124">
CR IN 10007124
</a>
<!--container-->
</li>
<!--bindings={
"ng-reflect-ng-if-else": "[object Object]"
}-->
<div _ngcontent-tpq-c266="" class="lmn-pb-2 lmn-font-size-xs bfaText ng-star-inserted">
GENESIS - North America Core | R06.71.3-Input Portfolio Data and Check for Completeness | FUNC001128-Greenlight or Round Table Meeting
</div>
<!--ng-container-->
<li _ngcontent-tpq-c266="" class="lmn-list-group-item crList ng-star-inserted">
<a _ngcontent-tpq-c266="" target="_blank" placement="top" ng-reflect-placement="top" href="" ng-reflect-mt-tooltip="10007126">
CR IN 10007126
</a>
<!--container-->
</li>
<!--bindings={
"ng-reflect-ng-if-else": "[object Object]"
}-->
<div _ngcontent-tpq-c266="" class="lmn-pb-2 lmn-font-size-xs bfaText ng-star-inserted">CitiRisk Retail | R06.71.3-Input Portfolio Data and Check for Completeness | FUNC001128-Greenlight or Round Table Meeting</div>
<!--ng-container-->
<li _ngcontent-tpq-c266="" class="lmn-list-group-item crList ng-star-inserted">
<a _ngcontent-tpq-c266="" target="_blank" placement="top" ng-reflect-placement="top" href="" ng-reflect-mt-tooltip="10007119">
CR IN 10007119
</a>
<!--container-->
</li>
<!--bindings={
"ng-reflect-ng-if-else": "[object Object]"
}-->
<div _ngcontent-tpq-c266="" class="lmn-pb-2 lmn-font-size-xs bfaText ng-star-inserted">Manual | R06.71.3-Input Portfolio Data and Check for Completeness | FUNC001128-Greenlight or Round Table Meeting</div>
<!--ng-container-->
<li _ngcontent-tpq-c266="" class="lmn-list-group-item crList ng-star-inserted">
<a _ngcontent-tpq-c266="" target="_blank" placement="top" ng-reflect-placement="top" href="" ng-reflect-mt-tooltip="10007121">
CR IN 10007121
</a>
<!--container-->
</li>
<!--bindings={
"ng-reflect-ng-if-else": "[object Object]"
}-->
<div _ngcontent-tpq-c266="" class="lmn-pb-2 lmn-font-size-xs bfaText ng-star-inserted">
Enterprise Data Warehouse (EDW) - APAC | R06.71.4-Conduct Data Quality Checks | FUNC001129-Greenshoe Option Exercise and Disclosures
</div>
</ol>
</ul>
<!--ng-container-->
</div>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论