在CSS忽略子表

所以我想自己在HTML和CSS3，我发现照片中描述的问题：在CSS忽略子表

所以我想要做的是忽略“概念”的文本字段将“行星”向右移动。

这是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; 
    } 
}

所以我要做的就是填补小标题为listItems中的链接中（通过液体），然后将它们显示为子标题链接。但我不知道如何忽略“subhead”listitems，以便下一个masthead__menu-item不会移位。

谢谢！

来源

2017-07-26 Zu Jiry

请加你的CSS –

你的话感到困惑的帖子....应该发生什么，当有人点击“概念”或“行星”？此外，您需要更新您的HTML至少链接名称 – amit77309

你要这样呢？

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

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

来源

2017-07-28 07:21:05 amit77309

非常感谢！这就是我搜索的！ –

如果你只是想针对直系后裔（不是所有的孩子），然后使用（子选择器）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

来源

2017-07-26 22:46:20 monners

感谢您的答案！问题更多的是，如果我将项目添加到子标题中，则子标题链接的文本字段会被填充，并通过该标题移动标头广告菜单项。所以我想要的是在不改变标头项目的情况下列出小标题链接 –

在CSS忽略子表

回答

相关问题