Dieses kleine Problem macht mich verrückt, obwohl es nicht allzu schwierig sein sollte, es umzusetzen.

Ich habe folgendes HTML:

<li id="menu-item-763" class="hide-menu-link menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-95 current_page_item menu-item-has-children menu-item-763">
<a href="mainmenulink">MAIN MENU LINK</a>
<ul class="sub-menu">
<li id="menu-item-764" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-764">
<a href="submenulink1">SUB MENU LINK 1</a></li> 
</ul>
</li>

Jetzt versuche ich, eine Sichtbarkeit anzuwenden: Nur für den Hauptmenü-Link, nicht aber für das Untermenü. Ich habe einen CSS-Klasse-Hide-Menü-Link auf den Hauptmenüpunkt angewendet. Ich habe viel versucht, einschließlich: nicht Selektor, sondern so etwas wie li.hide-menu-link: not (ul.sub-menu li) a {sichtbarkeit: versteckt; } funktioniert nicht.

Alle Tipps sind willkommen, ich bin sicher, die Lösung muss super einfach sein!

css
0
joff19 24 Dez. 2015 im 20:46

2 Antworten

Beste Antwort

Wählen Sie den a direkten Nachkommen von li.hide-menu-link mit der Auswahl > aus:

li.hide-menu-link > a {
    visibility: hidden;
    /* other CSS */
}

Dies wählt alle a aus, die unmittelbare Kinder von li.hide-menu-link sind:

<li class="hide-menu-link">
    <a>Will be styled</a> <!-- a direct/immediate descendant -->
    <div>
        <a>Will not be styled</a> <!-- not a direct/immediate descendant -->
    </div>
</li>

Für eine detailliertere Erläuterung des > - Selektors: https: / /developer.mozilla.org/en-US/docs/Web/CSS/Child_selectors

0
Hatchet 24 Dez. 2015 im 18:16

So etwas vielleicht?

<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">

  <title>title
    <style>
      .hide-menu-link a {
        display: none;
      }
      #menu-item-764 a {
        display: block;
      }
    </style>

</head>

<body>
  <ul>
    <li id="menu-item-763" class="hide-menu-link">
      <a href="mainmenulink">MAIN MENU LINK</a>
      <ul class="sub-menu">
        <li id="menu-item-764" class="">
          <a href="submenulink1">SUB MENU LINK 1</a>
        </li>
      </ul>
    </li>
  </ul>



</body>

</html>

Es wird nur der erste Link ausgeblendet. Vielleicht möchten Sie stattdessen die Verwendung von id in eine der Sublinks-Klassen ändern

0
Or Yaniv 24 Dez. 2015 im 18:02