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

Question

我是初学者并有疑问。

目标：在所有＆＃34; .title-title＆＃34;下展示一个栏。课程不是第一个。

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

感谢您的建议。

＆＃13;

＆＃13;

#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%;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

全部申请并将其从第一个中删除：

＆＃13;

＆＃13;

/* 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%;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

或使用not()选择器：

＆＃13;

＆＃13;

/* 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%;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

/* 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%;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

如果您不想使用任何ID，也可以在父级上使用:not(:first-child)：

div:not(:first-child) .title-title::after {
  content: "";
  display: block;
  width: 40%;
  margin-top: 5px;
  margin-left: auto;
  margin-right: auto;
  border: 1px red solid;
}

Answer 3

.wrapper div h2:after {
  content: "";
  display: block;
  width: 40%;
  background: red;
  margin-top: 5px;
  margin-left: auto;
  margin-right: auto;
  border: 1px red solid;
}
.wrapper div:first-child h2: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 class="wrapper">

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

</div>
<!-- AND SO ON -->