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这将影响.cover-buttons内部的任何ul 。 由于有两个ul即含有S 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比.focus更加具体，因此始终使用它。 您可以在.focus内的边框上添加!important .focus ，但这不是最佳实践-而是从主块中删除边框，效果很好。

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