CSS适用于所有内部div但跳过第一个孩子

Question

我是初学者,有一个问题.

目标:在所有".title-title"类下面渲染一个栏而不是第一个.

我做到了,它工作得很好,但为了学习的目的,我希望看到一个更好的/一线/专业解决方案吗？

谢谢你的建议.

#second .title-title:after,
#third .title-title:after {
  content: "";
  display: block;
  width: 40%;
  margin-top: 5px;
  margin-left: auto;
  margin-right: auto;
  border: 1px red solid;
}

/* Part of my own external bootstrap rip off LUL */
.py-ta-c {
  text-align: center;
}

.py-mb-m {
  margin-bottom: 10%;
}

<div id="first" class="py-ta-c py-mb-m">
	<h2 class="title-title">First</h2>
	<h4 class="title-subtitle">Exclude me</h4>
</div>

<div id="second" class="py-ta-c py-mb-m">
	<h2 class="title-title">Second</h2>
	<h4 class="title-subtitle">Include me</h4>
</div>

<div id="third" class="py-ta-c py-mb-m">
	<h2 class="title-title">Third</h2>
	<h4 class="title-subtitle">Include me</h4>
</div>

<!-- AND SO ON -->

Answer 1

适用于所有并从第一个中删除它:

/* All the titles */
.title-title:after {
  content: "";
  display: block;
  width: 40%;
  margin-top: 5px;
  margin-left: auto;
  margin-right: auto;
  border: 1px red solid;
}
/* We remove from the first one*/
#first .title-title:after {
  display:none;
}

/* Part of my own external bootstrap rip off LUL */
.py-ta-c {
  text-align: center;
}

.py-mb-m {
  margin-bottom: 10%;
}

<div id="first" class="py-ta-c py-mb-m">
	<h2 class="title-title">First</h2>
	<h4 class="title-subtitle">Exclude me</h4>
</div>

<div id="second" class="py-ta-c py-mb-m">
	<h2 class="title-title">Second</h2>
	<h4 class="title-subtitle">Include me</h4>
</div>

<div id="third" class="py-ta-c py-mb-m">
	<h2 class="title-title">Third</h2>
	<h4 class="title-subtitle">Include me</h4>
</div>

<!-- AND SO ON -->

或使用not()选择器:

/* Select all the divs but not the one with ID first*/
div:not(#first) .title-title:after {
  content: "";
  display: block;
  width: 40%;
  margin-top: 5px;
  margin-left: auto;
  margin-right: auto;
  border: 1px red solid;
}
/* OR
Select all the divs but not the first child
div:not(:first-child) .title-title:after { }
*/


/* Part of my own external bootstrap rip off LUL */
.py-ta-c {
  text-align: center;
}

.py-mb-m {
  margin-bottom: 10%;
}

<div id="first" class="py-ta-c py-mb-m">
	<h2 class="title-title">First</h2>
	<h4 class="title-subtitle">Exclude me</h4>
</div>

<div id="second" class="py-ta-c py-mb-m">
	<h2 class="title-title">Second</h2>
	<h4 class="title-subtitle">Include me</h4>
</div>

<div id="third" class="py-ta-c py-mb-m">
	<h2 class="title-title">Third</h2>
	<h4 class="title-subtitle">Include me</h4>
</div>

<!-- AND SO ON -->

另一个用nth-child()/ nth-of-type()(但在HTML结构更改时要小心):

/* This will select 2nd,3rd,4th .. */
div:nth-child(n+2) .title-title:after {
  content: "";
  display: block;
  width: 40%;
  margin-top: 5px;
  margin-left: auto;
  margin-right: auto;
  border: 1px red solid;
}
/* OR 
div:nth-of-type(n+2) .title-title:after { }

*/


/* Part of my own external bootstrap rip off LUL */
.py-ta-c {
  text-align: center;
}
.py-mb-m {
  margin-bottom: 10%;
}

<div id="first" class="py-ta-c py-mb-m">
	<h2 class="title-title">First</h2>
	<h4 class="title-subtitle">Exclude me</h4>
</div>

<div id="second" class="py-ta-c py-mb-m">
	<h2 class="title-title">Second</h2>
	<h4 class="title-subtitle">Include me</h4>
</div>

<div id="third" class="py-ta-c py-mb-m">
	<h2 class="title-title">Third</h2>
	<h4 class="title-subtitle">Include me</h4>
</div>

<!-- AND SO ON -->