CSS-Selektor und Grenzfrage

Question

Ich mag würde folgendes mit meinem Code erreichen:

Ausgabe (a) Ändern nur Click Here von einem Feld umgeben.

Problem (b) Der Rahmen für die Box in (a) sollte verschwinden und wieder erscheinen.

Derzeit begegne ich die folgenden Probleme mit meinem Code:

Ausgabe (a)

Für (a), hat mein Code nicht nur Click Here ändert von einem Kasten umgeben zu sein. Es ändert sich auch Pinterest, um von einer Box umgeben zu sein. Ich glaube, das Problem ist mit der Auswahl der obersten Ebene ul, aber ich habe es nicht geschafft, dies zu tun.

Relevante CSS-Code

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

Ausgabe (b)

Für (b), kann ich nicht scheinen die Box Grenze zu blinken zu erhalten.

Relevante Javascript-Code

$(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); 
}); 

Relevante CSS-Code

.focus { 
    border: 1px solid white; 
} 

.blur { 
    border: 1px solid black; 
} 

Das Seltsame Frage (b) ist, dass es scheint zu funktionieren, wenn ich die background-color ändern, wie hier gezeigt, : https://jsfiddle.net/75nvLs4x/12/. Wenn ich versuche, die border thickness zu ändern, funktioniert es jedoch nicht.

Voll Skript einschließlich HTML ist hier enthalten: https://jsfiddle.net/75nvLs4x/14/

Vielen Dank für Ihre Hilfe.

Answer 1

Ausgabe A

Ihre Wähler ist: .cover-buttons ul li:nth-last-child(5) a dies einen ul innerhalb .cover-buttons beeinflussen. Da es zwei ul s gibt, die li:nth-last-child(5) haben, haben beide die li:nth-last-child angewendet.

Sie können dieses Problem beheben nur die ul mit den Worten, die direkt in .cover-buttons ist und nur die li direkt innerhalb dieses ul

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

---

Ausgabe B

Ihre Grenzfrage ist aufgrund der Spezifität - Die Grenze in der .cover-buttons ul li:nth-last-child(5) a Abschnitt ist spezifischer als nur .focus so ist alwa ys benutzt.Sie könnte hinzufügen !important an der Grenze innerhalb .focus, aber das ist nicht die beste Praxis - stattdessen, entfernen Sie die Grenze aus dem Hauptblock und es funktioniert gut.

Aktualisiert Geige: https://jsfiddle.net/75nvLs4x/18/