CSS选择器和边框问题

Question

我希望用我的代码实现以下功能：

问题（a）仅改变Click Here被盒子包围。

问题（b）（a）中方框的边界应消失并重新出现。

目前，我的代码遇到以下问题：

问题（a）

对于（a），我的代码不只是将Click Here更改为被框包围。它也改变了Pinterest被一个盒子包围。我认为问题在于选择顶级ul，但我还没有成功。

相关的CSS代码

.cover-buttons ul:first-of-type li:nth-last-child(5) a {
  color: black;
  border: 1px solid black;
  padding: 14px 18px!important;
  font-weight: 400;
  line-height: 17px;
  font-size: 12px;
  display: inline-block;
  transition: all .2s ease;
  overflow: hidden;
  border-radius: 2px;
  box-sizing: border-box;
  list-style-type: none;
  font-family: 'Varela Round', 'Poppins', sans-serif;
}

问题（b）

对于（b），我似乎无法让盒子边框闪烁。

相关的Javascript代码

$(function(){
        var count = 0, $input = jQuery('.buttons.medium.button-outlined').not('.add-review, .bookmark, .show-dropdown, .sn-share'), interval = setInterval(function() {
            if ($input.hasClass('blur')) {
                $input.removeClass('blur').addClass('focus'); ++count;
            } else {
                $input.removeClass('focus').addClass('blur');
            }
            if (count === 3) { clearInterval(interval); }
        }, 2000);
});

相关的CSS代码

.focus {
  border: 1px solid white;
}

.blur {
  border: 1px solid black;
}

问题（b）的奇怪之处在于，当我更改background-color时它似乎有效：https://jsfiddle.net/75nvLs4x/12/。但是，当我尝试修改border thickness时，它不起作用。

这里包括完整的脚本，包括HTML：https://jsfiddle.net/75nvLs4x/14/

谢谢您的帮助。

Answer 1

问题A.

你的选择器是：.cover-buttons ul li:nth-last-child(5) a这将影响ul内的任何.cover-buttons。由于有两个uls有li:nth-last-child(5)，两者都应用了li:nth-last-child。

你可以解决这个问题，只说ul直接在.cover-buttons里面，而li直接在ul里面

.cover-buttons > ul > li:nth-last-child(5) a

---

问题B.

你的边界问题是由于特殊性 - .cover-buttons ul li:nth-last-child(5) a部分的边界比.focus更具体，所以总是使用。您可以将!important添加到.focus内的边框，但这不是最佳做法 - 相反，从主要块中删除边框并且它工作正常。

更新小提琴：https://jsfiddle.net/75nvLs4x/18/