Question

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

如果我删除以下行，则动画有效，但不是第一个和最后一个子元素。

.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),

代码

＆＃13;

.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;}

＆＃13;

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

＆＃13;

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

Answer 1

如果要删除上一个和下一个链接上的点，则不需要使用伪类来定位它们。只需使用：not（.prev）和a：not（.next），你就可以完成任务了

分页CSS上的点动画使用：不是选择器来排除第一个和最后一个孩子

1 个答案: