在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忽略子表

回答

相關問題