我正在尝试使用特定类在跨度内设置第一个和最后一个孩子的样式。 我是否在我的 CSS 中使用>并不重要， 除非我删除第一个和最后一个DIV，否则此代码将不起作用，即使它们与我尝试针对的类无关。
为什么？
.CSS：
.parent-span .cta-wrapper {background:gray;}
.parent-span:last-child > .cta-wrapper {background:red; }
.parent-span:first-child > .cta-wrapper {background:green}
.HTML：
<div>xxxxxxxxx</div>
<span class="parent-span">
<div class="cta-wrapper">
<div>1</div>
</div>
</span>
<span class="parent-span">
<div class="cta-wrapper">
<div>2</div>
</div>
</span>
<span class="parent-span">
<div class="cta-wrapper">
<div>3</div>
</div>
</span>
<div>xxxxxxxxx</div>
使用last-of-type和first-of-type而不是last-child和first-child
last-child/first-child地址并计算父元素的所有同级：div、span、p 等。
last-of-type/first-of-type选择器仅处理一种类型(标签，而不是类)，即div 或跨度或 p 标签等。
.parent-span .cta-wrapper {
background: gray;
}
.parent-span:last-of-type>.cta-wrapper {
background: red;
}
.parent-span:first-of-type>.cta-wrapper {
background: green
}<div>xxxxxxxxx</div>
<span class="parent-span">
<div class="cta-wrapper">
<div>1</div>
</div>
</span>
<span class="parent-span">
<div class="cta-wrapper">
<div>2</div>
</div>
</span>
<span class="parent-span">
<div class="cta-wrapper">
<div>3</div>
</div>
</span>
<div>xxxxxxxxx</div>nth CSS Selectors🟉
使用第 n 个 CSS 选择器时，我们必须考虑某些事项：
提示#1-所有目标元素共有的祖先元素。
提示#2- 每个目标元素的tagName及其祖先也是如此。
提示#3-nth入口点，并不总是目标元素。 它可能不止一个级别，具体取决于目标元素和/或祖先元素是否具有同级元素 以及它们的定位方式。
等级制度
布局为 5 级层次结构。
-
根----标签名称：
<html> -
级别 0- 标签名称：
<head>，<body>- 角色：<<<COMMON ANCESTOR>>> -
级别 1- 标签名称：
<div>，<span>-- 角色：<<<POINT OF ENTRY>>> -
级别 2- 标签名称：
<div>--------------角色：<<<TARGET ELEMENT>>> -
级别 3- 标签名称：
<div>
两个nth-nth-child和nth-of-type
nth-child:
-
如果使用
nth-child，请忽略提示#2， -
因此，在进入点上，共同祖先(即
<body>)有5个孩子，而不是3个孩子。 -
阵容为：
<div>、<span>、<span>、<span>、<div> -
所以与其
first-child不如nth-child(2) -
与其说是
last-child，不如说是nth-child(4)
nth-of-type:
-
如果您使用
nth-of-type，提示 #2是理解如何使用nth-of-type的关键。 -
在入口处，共同祖先有2个
<div>和3个<span>。 -
现在我们可以将
<span>指定为第一个、最后一个等，nth-of-type因为它区分元素tagNames。 -
[共同祖先]................：
body - {直系后裔(又名孩子)}：
> - [入境点].................：
span:first-of-type - [目标元素].................：
div body>span:first-of-type div
当然，上面的选择器可以有变化，但重要的部分是入口点span:first-of-type。
演示
单击任何跨度，它将从display:block恢复到display:inline这是OP中发布的内容
将鼠标悬停在任何元素上以查看其在层次结构中的级别、其tagName以及它的角色。
还包括一个注释掉nth-child样式的版本
。// For demonstration purposes
Array.from(document.querySelectorAll('span')).forEach(function(spn, idx) {
spn.addEventListener('click', function(e) {
spn.classList.toggle('inline');
}, false);
});
:root::before {
content: 'ROOT';
}
html {
height: 111vh;
width: 90vw;
background: rgba(255, 200, 50, 0.2);
font: 600 15px/1 Consolas;
cursor: crosshair;
overflow-y: scroll;
text-align: center;
color: black;
}
body {
height: 101%;
width: 50vw;
padding: 0 10vw;
margin: 2vh auto;
outline: 0.5rem solid rgba(250, 150, 150, 0.9);
background: rgba(50, 255, 0, 0.4);
font-size: 0.8rem;
}
div {
max-height: 15vh;
max-width: 50vw;
padding: 10px;
outline: 2px dashed darkblue;
background: rgba(255, 200, 50, 0.5);
}
span {
/* OP: display:inline */
display: block;
min-height: 10%;
max-width: 50vw;
padding: 0 20px;
margin: 8px auto;
outline: 3px solid blue;
background: rgba(255, 0, 100, 0.7);
}
.inline {
display: inline;
}
/*::..BEGIN DISABLED OP..::
.parent-span .cta-wrapper {background:gray;}
.parent-span:last-child > .cta-wrapper {background:red; }
.parent-span:first-child > .cta-wrapper {background:green}
}
::..END DISABLED OP..::*/
/*::..BEGIN nth-type-of..::*/
body>span>div {
background: gray;
}
body>span:first-of-type>div {
background: red;
}
body>span:last-of-type>div {
background: green;
}
/*::..END nth-of-type..::*/
/*::..BEGIN nth-child..::
body>span>div {
background: gray;
}
body>span:nth-child(2)>div {
background: red;
}
body>span:nth-child(4)>div {
background: green;
}
::..END nth-child..::*/<html title='ROOT-HTML'>
<head title='L0-HEAD'>
</head>
<body title='L0-BODY [COMMON ANCESTOR]'>L0
<div title='L1-DIV'>[XXXX] L1 [XXXX]</div>
<span class="parent-span" title='L1-SPAN [POINT OF ENTRY]'>L1
<div class="cta-wrapper" title='L2-DIV [TARGET ELEMENT]'>L2
<div title='L3-DIV'>L3 [1]</div>
</div>
</span>
<span class="parent-span" title='L1-SPAN [POINT OF ENTRY]'>L1
<div class="cta-wrapper" title='L2-DIV [TARGET ELEMENT]'>L2
<div title='L3-DIV'>L3 [2]</div>
</div>
</span>
<span class="parent-span" title='L1-SPAN [POINT OF ENTRY]'>L1
<div class="cta-wrapper" title='L2-DIV [TARGET ELEMENT]'>L2
<div title='L3-DIV'>L3 [3]</div>
</div>
</span>
<div title='L1-DIV'>[XXXX] L1 [XXXX]</div>
</body>
</html>术语：共同祖先™，切入™点，角色™和层次结构™不是标准术语，它们是我自己创造的，因为这些规则从来没有被任何人(包括我自己)很好地解释过AFAIK。
为了使第一个子项和最后一个子项正常工作，您的 html 内容需要位于列表或其他一系列项中。您的跨度是单数的，因此没有第一个和最后一个项目。
查看我创建的无序列表以及在其中选择第一个和最后一个列表项的样式。
为了做到这一点，请将您的跨度与父类放在一个div 中，然后选择该父div，然后选择其中重复元素的第一个子级/最后一个子级。
.parent-span .cta-wrapper {background:gray;}
.parent-span:last-child > .cta-wrapper {background:red; }
.parent-span:first-child > .cta-wrapper {background:green}
ul {
list-style: none;
margin: 2em 0 0 0;
padding: 0;
}
ul.parent-span li:first-child
{
background:green;
}
ul.parent-span li:last-child
{
background:red;
}<div>xxxxxxxxx</div>
<span class="parent-span">
<div class="cta-wrapper">
<div>1</div>
</div>
</span>
<span class="parent-span">
<div class="cta-wrapper">
<div>2</div>
</div>
</span>
<span class="parent-span">
<div class="cta-wrapper">
<div>3</div>
</div>
</span>
<ul class="parent-span">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<div>xxxxxxxxx</div>