css - 使用 :not selector to exclude first and last child 的分页 CSS 上的点动画

Question

我一直在研究一种新的分页样式，在数字上有一个点动画，但不是分页的第一个和最后一个 child ，但不确定我做错了什么。

如果我删除以下几行，动画将起作用，但第一个和最后一个子元素将不起作用。

.pagination a:before:not(:last-child),
.pagination a:before:not(:first-child),

.pagination a:hover:before:not(:last-child),
.pagination a:hover:before:not(:last-child),

代码

.paging-navigation {
	border-top: 1px solid rgba(0, 0, 0, 0.1);
	margin: 40px auto;
	padding-top: 30px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
}
.pagination { font-family: Arial, Verdana, Sans-serif; line-height: 38px;}
.pagination a,
.pagination a:link,
.pagination a:visited,
.pagination a:active,
.pagination .current {
	position: relative;
	padding: 8px 12px;
	margin: 0 1px;
	font-size:14px;
	font-weight: bold;
	color: #444444;
	text-decoration: none;
}

.pagination a:before:not(:last-child),
.pagination a:before:not(:first-child),
.pagination a:before {
	content: '\2022';
	position: absolute;
	top: 0px;
	left: 0;
	right: 0;
	text-align: center;
	opacity: 0;
	transition: 300ms ease;
}
.pagination a:hover:before:not(:last-child),
.pagination a:hover:before:not(:last-child),
.pagination a:hover:before {
	content: '\2022';
	position: absolute;
	top: -20px;
	left: 0;
	right: 0;
	text-align: center;
	opacity: 1;
}
.pagination a:hover,
.pagination span.current { color: #444444; font-weight: bold; }
.pagination .current:before {
	content: '\2022';
	position: absolute;
	top: -20px;
	left: 0;
	right: 0;
	text-align: center;
}
.pagination .extend  { color: #919191; float: right; font-size: 11px; line-height: 35px;}

  <nav class="navigation paging-navigation">
    <div class="pagination loop-pagination">
      <a class="prev page-numbers" href="#"><i class="fa fa-angle-left fa-fw"></i>Previous</a>
      <a class="page-numbers" href="#">1</a>
      <a class="page-numbers" href="#">2</a>
      <span class="page-numbers current">3</span>
      <a class="page-numbers" href="#">4</a>
      <a class="next page-numbers" href="#">Next<i class="fa fa-angle-right fa-fw"></i></a>
    </div>
  </nav>

我做错了什么？可能是我在错误的方法中使用了 :not 选择器，或者不是作为 CSS 标准，但是当我使用 W3C 验证器验证 CSS 时，它验证了 100%

Answer 1

如果你想删除上一个和下一个链接上的点，那么你不需要使用伪类来定位它们。只需使用 a:not(.prev) 和 a:not(.next) 即可完成任务