在幾個子元素內選擇一個id

我試圖編輯徽標的移動視圖，但是當您開始向下滾動頁面時，導航欄的大小會減小甚至更大，並且在處於該狀態時我無法進行其他更改。

<header id="site-header" class="" role="banner"> 
     <div id="header-wrapper"> 
      <div id="header-container" class="clearfix"> 
       <div id="site-logo">

當導航欄下降到更小的尺寸的第一行變得

<header id="site-header" class="header-sticked" role="banner">

是否有可能修改站點頭只有當「標題-粘」存在？我知道我可以編輯主題來向網站徽標添加一個類，但我很感興趣，看看只有CSS才能實現。

例如（僞）類似

.header-sticked#header-wrapper#header-container#site-logo { 
//blah 
}

來源

2016-01-20 jblz

我敢肯定你正在尋找

#site-header.header-sticked #site-logo { 
    // blah 
}

你因此造型的標誌，只有當它嵌套在網站頁眉內與該類.header-sticked

來源

2016-01-20 20:03:04 ingridly

獲勝者，謝謝。我沒有意識到你可以在'site-header'內調用任何子元素，而不用引用它們之間的每個元素 – jblz

是的！你只需要包含儘可能多的類/ id，使你的選擇器具有足夠的特定目標。在這種情況下，如果'header-sticked'只能應用到'＃site-header'，你甚至可以從你的選擇器中刪除它。這裏有一個方便的鏈接來閱讀有關特異性的所有信息：https://www.smashingmagazine.com/2007/07/css-specificity-things-you-should-know – ingridly

你的問題是不是太清楚，但如果你想解決既有ID site-header和類header-sticked一個元素，那麼

#site-header.header-sticked { 
    /* blah */ 
}

會做。

但是，如果你想內解決這個ID site-logo，你需要這個

#site-header.header-sticked #site-logo { 
    /* blah */ 
}

注意#site-logo之前的空間，而事實上，你並不需要任何中間的ID。

來源

2016-01-20 19:59:34

我不知道我理解你的問題，但如果你有： <header id="site-header" class="header-sticked" role="banner">

然後下面的CSS將應用於元素

#site-header.header-sticked{ 
width: 100px; 
height: 100px; 
background: black; 
}

來源

2016-01-20 20:00:37 Kunamatata

在幾個子元素內選擇一個id

回答

相關問題