ページネーションのデザインで、表示しているページ番号の色が変わらない。

ページネーションで、表示しているページ番号の色を変えたいのですが、デフォルトから変わりません。使っているブラウザはchromeです。ページ更新や、Ctrl + F5でキャッシュをクリアしてもダメでした

pagination
1{% load static %}
2{% block customcss %}
3  <link rel='stylesheet' href="{% static 'css/style.css' %}">
4  <link rel='stylesheet' href="{% static 'css/page.css' %}">
5{% endblock customcss %}
6
7<div class="page">
8  <ul class="pagination">
9      <!-- 前へ の部分 -->
10      {% if page_obj.has_previous %}
11          <li class="page-item">
12              <a class="page-link" href="?page={{ page_obj.previous_page_number }}">
13                  <span aria-hidden="true">&laquo;</span>
14              </a>
15          </li>
16      {% else %}
17        <li class="page-item">
18          <a class="page-link" href="#">
19            <span aria-hidden="true">&laquo;</span>
20          </a>
21        </li>
22      {% endif %}
23
24      <!-- 数字の部分 -->
25      {% for num in page_obj.paginator.page_range %}
26          {% if page_obj.number == num %}
27              <li class="page-item active"><a class="page-link" href="#!">{{ num }}</a></li>
28          {% else %}
29              <li class="page-item"><a class="page-link" href="?page={{ num }}">{{ num }}</a></li>
30          {% endif %}
31      {% endfor %}
32
33      <!-- 次へ の部分 -->
34      {% if page_obj.has_next %}
35          <li class="page-item">
36              <a class="page-link" href="?page={{ page_obj.next_page_number }}">
37                  <span aria-hidden="true">&raquo;</span>
38              </a>
39          </li>
40      {% else %}
41          <li class="page-item">
42            <a class="page-link" href="#">
43              <span aria-hidden="true">&raquo;</span>
44            </a>
45          </li>
46      {% endif %}
47  </ul>
48</div>
49

css
1.pagination li a{
2  border:none;
3  color:#696969;
4  margin-left:10px;
5}
6
7.pagination li a:hover{
8  border-radius: 50%;
9}
10
11.pagination>.active>a {
12  background-color: red;   
13  border-radius: 50%;
14}
15

cssの
.pagination>.active>a {
background-color: red;
border-radius: 50%;
}
の部分に表示しているページ番号の色を変えるように書いています。セレクタの指定の方法が間違っているのでしょうか？しかしborder-radius: 50%;はうまくいきました。

Lhankor_Mhy

2021/01/05 10:05

問題が再現しませんでした。ご提示いただいていない部分のコードが原因かもしれません。

reol-777

2021/01/05 12:55

htmlの <li class="page-item active"><a class="page-link" href="#!">{{ num }}</a></li>のclass="page-link"を削除した結果、形は崩れましたが、色は正しく指定したとおりになりました。恐らく、別に定義された、background-colorが優先され、正しく表示されなかったのだと思います。原因は分かったのですが、class="page-link"にあらかじめ書かれているcssは恐らく、bootstrap側？で定義されているため、変更の仕方がわかりません。上書きするみたいなことはできないのでしょうか？