我试图在第一个和最后一个孩子的风格，在特定班级的内部。
如果我在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>
答案 0 :(得分：1)
使用第n个CSS选择器时，我们必须考虑某些事项：
提示＃1 - 所有目标元素都在 <的 祖先 元素 EM>共同
提示＃2 - 每个目标元素 tagName s 以及他们的祖先。
提示＃3 - nth 条目 并非总是如此目标要素。它可能不止一个级别，具体取决于目标元素和/或祖先元素是否具有兄弟元素以及它们是如何定位的。
布局是5级层次结构。
<html> <head>， <body> - 角色： {{1} } <<<COMMON ANCESTOR>>>， <div> - 角色： {{1 }} <span> --------------角色：的 <<<POINT OF ENTRY>>> <div> <<<TARGET ELEMENT>>>个 - <div>和nth nth-child 如果您使用nth-of-type，请忽略提示＃2 ，
所以在 入口点 共同祖先 （即nth-child: ） 5个孩子，而不是3个孩子。
阵容为：nth-child，<body>，<div>，<span>，<span>
因此<span>不应该是<div>
取代first-child，而不是nth-child(2)
last-child 如果您使用nth-child(4)，提示＃2 是理解如何使用nth-of-type:的关键。
在 条目 共同祖先 有2个nth-of-type s和3 nth-of-type s。
现在我们可以指定<div>作为第一个，最后一个等，因为<span>区分了元素<span>。
[共同祖先] ................：nth-of-type
tagName body > span:first-of-type 当然，上面的选择器可以有变化，但重要的部分是 入口点 div。
点击任意范围，它将从body>span:first-of-type div恢复为span:first-of-type，这是OP中发布的
将鼠标悬停在任何元素上，即可查看层次结构中的级别，display:block及其角色。
还注明了display:inline个样式的注释。*
tagNamenth-child// For demonstration purposes
Array.from(document.querySelectorAll('span')).forEach(function(spn, idx) {
spn.addEventListener('click', function(e) {
spn.classList.toggle('inline');
}, false);
});
条款： 共同祖先™ ， 入境点 ， role™ ， hierarchy™ 不是标准术语，它们属于我自己的创作，因为这些规则永远不会任何人（包括我自己）都很好地解释了AFAIK。
答案 1 :(得分：1)
使用last-of-type和first-of-type代替last-child和first-child
last-child / first-child地址并计算父元素的所有兄弟：divs，span，p等。
last-of-type / first-of-type选择器仅处理一个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>
答案 2 :(得分：0)
为了让第一个孩子和最后一个孩子的伪像工作，你的html内容需要在列表或其他一系列项目中。你的跨度是单数的，所以没有第一个和最后一个项目。
查看我创建的无序列表和样式以选择那里的第一个和最后一个列表项。
为了让你这样做，把你的跨度放在父类的div中，然后选择那个父div，然后选择一个重复元素的first-child / last-child。
.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>