flask-paginate 如何设置页码样式？

Question

我不想安装引导程序，但我设法找到了一种方法来以我自己的方式对其进行样式设置。如您所见here，我的分页工作正常。只是，我无法设置 a:active 链接以显示不同的背景颜色。这是我的 css，.page 是包含 {{ pagination.links }} 的 div：

.content .big-box .page {
list-style-type: none;
display: flex;
position: absolute;
z-index: 3;
right: 0px;
bottom: 15px;
border: none;
} 

.content .big-box .page li {
list-style-type: none;
display: inline-block;
cursor: pointer;
}

.content .big-box .page li:active {
background-color: black;
}

.content .big-box .page li a {
height: 100%;
width: 100%;
color: white;
padding: 5px;
background-color: grey;
border: 1px solid black;
}

.content .big-box .page a:hover {
background-color: #696969;
}

.content .big-box .page a:active {
background-color: black;
}

我通过documentation，但还是没有成功。我今天做了很多测试，终于得出了这些数字和箭头组件是a和li的解决方案。 我尝试设置 li:active、a:active、ul:active、p:active、span:active、button:active 的样式，但似乎没有任何效果。其他一切正常，但 :active 和 :hover 按预期工作，所有其他样式也一样。请大神赐教！

编辑：这是我想要设置样式的代码。我使用 .page .pagination ul .active a:active {background-color: black;}，但它不起作用。

<div class="page">
  <div class="pagination">
    <ul>
      <li class="previous disabled unavailable"><a> &laquo; </a></li>
      <li class="active"><a>1</a></li>
      <li><a href="/forum/obavijesti/silazno/?page=2">2</a></li>
      <li class="next"><a href="/forum/obavijesti/silazno/?page=2">&raquo;</a></li>
    </ul>
  </div>
</div>

Answer 1

在您的浏览器中，打开开发者工具并检查您想要设置样式的元素。在那里您可以确切地看到这是什么类型的 html 元素以及应用了哪些其他样式。

对于 Chrome，可以在此处找到文档：

https://developers.google.com/web/tools/chrome-devtools

一旦你知道你想要的样式，你必须应用正确的样式和正确的权重。

CSS 代表 Cascading Style Sheets，这最终意味着，您最终看到的样式是根据内联样式、ID、类等“计算”出来的。

您可以在此处了解有关 CSS 的更多信息：

https://developer.mozilla.org/en-US/docs/Learn/CSS

更新

我将您的代码复制粘贴到我的本地机器上，并且

<style>
    .page .pagination ul .active a:active {background-color: black;}
</style>

对我来说就像一个魅力。

你确定这是什么意思吗？

这意味着，只有当你点击它时，才为已经激活的链接设置样式。

在您的示例 HTML 代码中，这意味着仅在单击标有 1 的链接时才有效 - 这对我来说没有意义，因为您无法单击它:-)

也许您想删除 .active 说明符？