忽略css中的子列表

Question

所以我在html和css3中尝试自己，我发现了图片中描述的问题：

What I have

What I want

所以我想要做的就是忽略＆＃34; Concepts＆＃34;的文本字段。轮班＆＃34;行星＆＃34;在右边。

这就是html结构目前的样子：

HTML：

 <div class="masthead__inner-wrap">
   <li class="masthead_menu-item">
   <a href="LinkToConcepts"></a> 
     <ul subhead-links>
       <li class="subhead-link">
         <a href="LinkToSubheadLink"></a>
       </li>
     </ul>
   </li>
 </div>

CSS：

.masthead__menu-item {
  display: block;
  list-style-type: none;
  white-space: nowrap;

  &--lg {
    padding-right: 2em;
    font-weight: 700;
  }
}

.subhead-links{
  border-radius: 0.2em;
  border: 2px solid #73AD21;
  border-color: $border-color;
  position: relative;
  clear: both;

  ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
  }
}

.subhead-link {
  font-size: $type-size-7;
  display: block;
  list-style-type: none;
  white-space: nowrap;

  &--lg {
    padding-right: 1em;
    font-weight: 700;
  }
}

所以我所做的是以列表项目（通过液体）填充子标题链接，然后将它们显示为子标题链接。 但我不知道如何忽略＆＃34;小标题＆＃34; listitems，以便下一个masthead__menu-item不会移位。

谢谢！

Answer 1

如果你只是试图瞄准直接后代（不是所有孩子），那么使用（子选择器）[https://developer.mozilla.org/en/docs/Web/CSS/Child_selectors]

例如：

.masthead_menu-item > a {
    color: green; /* Will not affect <li><a>...</a></li> */
}

但是，我觉得这不是你真正要求的。您发布的HTML并不能真正反映您之前/之后的图形。

要获得更具体的答案，请发布您的标记和CSS

Answer 2

你想要这样的东西吗？

＆＃13;

＆＃13;

.masthead_menu-item li{display:inline;}
.sublist li{display:none;}
.sublist:target li{
	display:inline;
	}

＆＃13;

<div class="masthead__inner-wrap">
    <ul class="masthead_menu-item">
        <li><a href="#concepts_sublist">Concepts</a></li>
		<li><a href="#planets_sublist">Planets</a></li>
    </ul>
	<ul class="sublist" id="concepts_sublist">
		<li><a href="#">Waves</a></li>
		<li><a href="#">Magic</a></li>
	</ul>
	<ul class="sublist" id="planets_sublist">
		<li><a href="#">Planet1</a></li>
		<li><a href="#">Planet2</a></li>
	</ul>
</div>

＆＃13;

＆＃13;

＆＃13;