CSS 셀렉터와 국경 문제

문제 (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)에, 내가 상자 테두리 깜박 얻이 수없는 것 들어

관련 자바 스크립트 코드

$(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/ 당신의 도움에 감사드립니다.

출처

2017-12-28 firefirehelphelp

는 .cover - 버튼으로 UL 리를 대상으로하는 이유는 몇 가지 이유가 있나요 : n 번째-마지막 아이 (5) 대신 그냥 클래스주는? – VilleKoo

@VilleKoo 저는 WordPress 테마를 사용하고 있습니다. 따라서, 나는 테마의 파일 구조로 작업해야한다고 생각한다. 나는이 문제에 익숙하지 않으므로 내가 틀렸다면 알려주십시오. 고맙습니다. – firefirehelphelp

발행

당신의 선택은 다음과 같습니다 .cover-buttons ul li:nth-last-child(5) a이 어떤 ul.cover-buttons 내부에 영향을 미칠 것입니다. li:nth-last-child(5)을 갖는 두 개의 ul이 있으므로 두 가지 모두 li:nth-last-child이 적용됩니다.

에만

귀하의 국경 문제 .cover-buttons 내부에 직접 년대 ul 그 ul

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

이슈 B 내부에 직접에만 li을 말함으로써이 문제를 해결할 수있는 것은 특이성 때문이다 - .cover-buttons ul li:nth-last-child(5) a 섹션의 경계는 .focus보다 구체적이므로 alwa입니다. 사용 된 ys.은 일 수 있으며 .focus 안에있는 테두리에 !important을 추가 할 수 있습니다.하지만 이는 모범 사례가 아닙니다. 대신 기본 블록에서 테두리를 제거하면 정상적으로 작동합니다.

가 바이올린 업데이트 : https://jsfiddle.net/75nvLs4x/18/

출처

2017-12-28 09:27:38

이것은 훌륭하게 작동했습니다! 고맙습니다. – firefirehelphelp

답변

관련 문제