내 사이트에서 무작위로 패딩 된 요소 제거

Question

내 Squarespace 사이트에 맞춤 코드가 있습니다. 나는 이것이 Squarespace 포럼이 아니라는 것을 알고 있지만, 나는 커스텀 CSS에서 하나의 특정 엘리먼트를 목표로하는 방법을 공략하고있다. http://www.roboticsrookie.com/

나는 # 메인 네비게이션 a.folder 퍼팅 시도했다 {여백 : 0 픽셀} 그래서 여기

사이트입니다; 내 sitewide CSS에서,하지만 그것은 비효율적 인 것으로 입증되었습니다. 모든 팁은 크게 감사하겠습니다.

Squarespace는 패딩이있는 빈 탐색 링크를 생성하지만 특정 요소의 패딩을 제거하는 방법을 찾는 것으로 보입니다.

Screen shot

Answer 1

그것은 아마의 드롭 다운 메뉴의 아이콘을 개최하도록 설계 앵커 태그의 "패딩"아니다.

가능한 경우 빈 앵커 태그를 제거하십시오.

<li aria-haspopup="true" class="folder-collection folder"> 
<a href="#" onclick="return false;"></a> <!-- < this anchor is the space --> 
<a href="http://www.roboticsrookie.com/reviews/">Reviews</a> 
<span class="delimiter">/</span> 
<div class="subnav"> 
<ul> 
<li class="page-collection"><a href="/robotics-reviews/">Robotics Reviews</a></li> 
<li class="page-collection"><a href="/book-reviews/">Book Reviews</a></li> 
<li class="blog-collection"><a href="/reviews/">Reviews</a></li> 
</ul> 
</div> 
</li> 

또는 추가 CSS :

li.folder-collection.folder > a:nth-child(1) { display: none;}

이 가 그 첫 번째 빈 앵커를 제거해야합니다.

CSS 선택기가 잘못되었습니다. #main-navigation a.folder이 (가) "폴더"클래스의 앵커 태그를 찾고 있습니다. 즉, <a class="folder" href="#"></a>입니다.

갖고 계신 것은 목록 폴더에있는 클래스 폴더와 앵커 태그가있는 목록 항목입니다. 또는 <li class="folder-collection folder"><a href="#"></a></li>.

고유 앵커는 고유하지 않으므로 (쉽게) 타겟팅 할 수 없습니다. 앵커에는 클래스 또는 ID 사과가 없으며 해당 목록 항목 내에 다른 앵커가 있습니다. 따라서 nth-child와 같은 더 구체적인 선택기를 사용하여 선택해야합니다.