удалить только одну ссылку в разделе div, но не навигационное меню в том же div

Question

У меня проблема с CSS. Ссылка находится в «главном div», и я хочу, чтобы она была удалена. Но ниже находится раздел ссылок, поэтому я не могу сделать «#main a {display: none}».

Тот, кто говорит «Пропустить навигацию», - это то, что я хочу удалить. И я не могу удалить НИЧЕГО из HTML (присвоение уни)

<div id="menu"> 
     <a href="#maincontent">Skip navigation</a> 
     <ul> 
      <li><a href="#">home</a></li> 
      <li><a href="#">project</a></li> 
      <li><a href="#">information</a></li> 
      <li><a href="#">contakt</a></li> 
      <li><a href="#">find usa></li> 
     </ul> 

Я пробовал все виды CSS:

menu #maincontent a {display:none;} 
menu a {display: none;} 

и 10 других, но безрезультатно.

Любая помощь очень ценится

Answer 1

Вы можете просто дать и идентификатор для этого тега <a> например #maincontent и сделать это:

HTML:

<div id="menu"> 
     <a href="#maincontent" id="maincontent">Skip navigation</a> 
     <ul> 
      <li><a href="#">home</a></li> 
      <li><a href="#">project</a></li> 
      <li><a href="#">information</a></li> 
      <li><a href="#">contakt</a></li> 
      <li><a href="#">find usa></li> 
     </ul> 

CSS:

#maincontent { 
    display:none; 
} 

Answer 2

Используйте прямой детский селектор:

#menu > a{display:none;} /*hides skip navigation only*/ 

---

Это неправильно:

menu #maincontent a {display:none;} 
menu a {display: none;} 

Я буду делать так:

#menu a#maincontent {display:none;} 
#menu > a {display: none;} 

---

Но поскольку идентификатор является уникальным, вы можете применить CSS для этого непосредственно :

#maincontent{display:none;} 

Answer 3

Если вы действительно не хотите, чтобы изменить что-либо в HTML, вы можете использовать селектор атрибута для href:

#menu a[href="#maincontent"] { 
    display: none; 
} 

Или событие целевой <a> с селектором псевдо позиционирования ребенка, например как :nth-child(n), :first-child, или :first-of-type. Но тогда вам придется подвергнуть их прямому дочернему селектору >. Пример:

#menu > a:first-child { 
    display: none; 
}