html - CSS 边框属性不起作用

Question

   .pagination-box ul{
    	display: flex;
        justify-content: space-between;
    }
    
    .pagination-box ul li{
    	list-style: none;
    	text-align: center;
    	display: inline-block;
    }
    
    .pagination-box ul li:not(:first-child):not(:last-child){
    	
    	border :1px solid #cfcfcf;
    	border-radius: 50%;
    	width: 40px;
    	height: 40px;
    	padding: 9px;
    
    }
    
    .pagination-box ul li.active{
    	border:2px solid #ff9805;
    }

<div class="row pagination-box hidden-xs">
  <ul>
    <li>
      <a>
        <img ng-click="gotoPrev()" class="prev left-arrow" src="img/left_arrow.svg">
      </a>
    </li>
    <li class="active">01</li>
    <li class="">02</li>
    <li class="">03</li>
    <li class="">04</li>
    <li class="">05</li>
    <li class="">06</li>
    <li>
      <a>
        <img ng-click="gotoNext()" class="next right-arrow" src="img/right_arrow.svg">
      </a>
    </li>
  </ul>
</div>

看起来像:

在 .active 类中，我指定了一个边框属性，但它不起作用。但是，如果我编写 color:red; 或任何其他 CSS 属性，它就可以工作。

在 chrome 中，当我检查元素时，它显示如下:

我不确定，为什么？

Answer 1

.pagination-box ul li:not(:first-child):not(:last-child)

此选择器会覆盖您的 .pagination-box ul li.active(更具体)。

解决方案:

.pagination-box ul li.active {
  border:2px solid #ff9805 !important;
}

或:

.pagination-box ul li {
  border-radius: 50%;
  width: 40px;
  height: 40px;
  padding: 9px;
}
.pagination-box ul li:not(:first-child):not(:last-child):not(.active) {
  border: 1px solid #cfcfcf;
}
.pagination-box ul li.active {
  border: 2px solid #ff9805;
}

或:

.pagination-box ul li.active:not(:first-child):not(:last-child) {
  border:2px solid #ff9805;
}