Question

＆＃13;

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

＆＃13;

color:red;

＆＃13;

看起来像：

<。>在.active类中我已经指定了一个border属性，但是它没有用。但是，如果我写

    var range = Math.abs(from.getTime() - to.getTime());
    var diffDays = Math.ceil(range / (1000 * 3600 * 24)) - 1;
    Messages.aggregate(
        [
            {
                $match: {
                    incoming: true,
                    date: {
                        $gte: from,
                        $lte: to
                    }
                }
            },
            {
                $group: {
                    _id: {
                        sender: "$sender"
                    },
                    days: {
                        $addToSet: { $dayOfYear: "$date" }
                    }
                }
            },
            {
                $project: {
                    _id: 1,
                    days: 1
                    daysCount: { $size: "$days" }
                }
            },
            {
                $match: {
                    daysCount: { $gte: diffDays }
                }
            }
        ],
        (err, res) => {
            if(err) {
                return emitter.sendNativeError(err);
            }

            return emitter.sendData({users: res});
        }
    );

或任何其他CSS属性，它就可以了。

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

我不确定，为什么？

Answer 1

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

此选择器会覆盖您的.pagination-box ul li.active（更具体的特异性）。

Soulution：

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

Answer 2

因为你申请所有li（即）

的财产覆盖了财产

.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 red !important;
}

以下是jsFiddle

希望它有效：）

Answer 3

您的样式会被:not()覆盖，因此您需要在活动类中添加！important

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

https://jsfiddle.net/xrw38xjz/

Answer 4

你的声明

:not(:first-child):not(:last-child)

比

更具体

.acitve

css首先使用更具体的声明。以下是一些教程如何计算：https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

您可以输入！important作为某人已经建议：

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

或指定not attributes：

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

所以你的主动声明会更重要

Answer 5

如果你不想使用！important，你也可以使用你的附加:not类扩展.active特异性

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

CSS border-property无法正常工作

5 个答案: