一套大膽首先標籤使用CSS

Question

我有一個固定的HTML結構，其中我想在「類別」類

設置粗體只有第一個HREF，標籤在我的示例代碼中，我喜歡到SEHT此鏈接大膽：

• 的Zum Kleben
• 的Zum Heften
• 的Zum Auf- &Abhängen

這裏是我的html代碼：

<div class="content-box-main-inner clearfix"> 
    <div class="categories"> 
     <div class="cat_icon"> 
      <a href="/zum-kleben/"> 
       <img src="images/logos/item_ltr.gif" width="5" height="13" alt="Zum Kleben" title="Zum Kleben"></a> 
     </div> 
      <div class="cat_link" style="padding-left:8px;"> 
       <div class="cat_link_container"> 
        <a href="/zum-kleben/" class="cat-menu">Zum Kleben</a> 
       </div> 
       <div class="cat_icon"> 
        <a href="/zum-kleben/Knoepfe-Klebehaken/"> 
         <img src="images/logos/item_ltr.gif" width="5" height="13" alt="Klebehaken" title="Klebehaken"></a> 
        </div> 
        <div class="cat_sub_link" style="padding-left:8px;"> 
         <div class="cat_link_container"> 
          <a href="/zum-kleben/Knoepfe-Klebehaken/" class="cat-menu">Klebehaken</a>     </div> 
        </div> 
        <div class="cat_icon"> 
         <a href="/zum-kleben/Klebehacken--Sicherheitsfaden--Kombipack/"> 
          <img src="images/logos/item_ltr.gif" width="5" height="13" alt="Klebehacken &amp; Sicherheitsfaden (Kombipack)" title="Klebehacken &amp; Sicherheitsfaden (Kombipack)"></a> 
         </div> 
         <div class="cat_sub_link" style="padding-left:8px;"> 
          <div class="cat_link_container"><a href="/zum-kleben/Klettbaender/" class="cat-menu">Klettbänder selbstklebend</a> 
          </div> 
         </div> 
        </div> 
       </div> 
       <div class="categories"> 
        <div class="cat_icon"> 
         <a href="/Zum-Heften/"> 
          <img src="images/logos/item_ltr.gif" width="5" height="13" alt="Zum Heften" title="Zum Heften"></a> 
         </div> 
         <div class="cat_link" style="padding-left:8px;"> 
          <div class="cat_link_container"> 
           <a href="/Zum-Heften/" class="cat-menu">Zum Heften</a> 
          </div> 
          <div class="cat_icon"> 
           <a href="/Zum-Heften/Pistolen/"> 
            <img src="images/logos/item_ltr.gif" width="5" height="13" alt="Heftpistolen/Etikettierpistolen" title="Heftpistolen/Etikettierpistolen"></a> 
           </div> 
           <div class="cat_sub_link" style="padding-left:8px;"> 
            <div class="cat_link_container"> 
             <a href="/Zum-Heften/Pistolen/" class="cat-menu">Heftpistolen/Etikettierpistolen</a></div> 
           </div> 
          </div> 
         </div> 
         <div class="categories"> 
          <div class="cat_icon"> 
           <a href="/zum-auf-und-abhaengen/"> 
            <img src="images/logos/item_ltr.gif" width="5" height="13" alt="Zum Auf- &amp; Abhängen" title="Zum Auf- &amp; Abhängen"></a> 
           </div> 
           <div class="cat_link" style="padding-left:8px;"> 
            <div class="cat_link_container"> 
             <a href="/zum-auf-und-abhaengen/" class="cat-menu">Zum Auf- &amp; Abhängen</a> 
            </div> 
            <div class="cat_icon"> 
             <a href="/zum-auf-und-abhaengen/Haken/"> 
              <img src="images/logos/item_ltr.gif" width="5" height="13" alt="Haken" title="Haken"></a> 
             </div> 
             <div class="cat_sub_link" style="padding-left:8px;"> 
              <div class="cat_link_container"> 
               <a href="/zum-auf-und-abhaengen/Haken/" class="cat-menu">Haken</a> 
              </div> 
             </div> 
             <div class="cat_icon"> 
              <a href="/zum-auf-und-abhaengen/Faeden/"> 
               <img src="images/logos/item_ltr.gif" width="5" height="13" alt="Sicherheitsfäden &amp; Kabelbinder" title="Sicherheitsfäden &amp; Kabelbinder"></a> 
              </div> 
              <div class="cat_sub_link" style="padding-left:8px;"> 
               <div class="cat_link_container"> 
                <a href="/zum-auf-und-abhaengen/Faeden/" class="cat-menu">Sicherheitsfäden &amp; Kabelbinder</a> 
               </div> 
              </div> 
             </div> 
            </div> 

這裏是我的CSS代碼（不工作:(）：

.catetories.cat_icon:first-child a{ 
    font-weight:bold; 
} 

這是我JSFIDDLE示例代碼。

希望有人有一個想法。

Answer 1

只是讓你的CSS

.categories > .cat_link > .cat_link_container > a { 
    font-weight:bold; 
} 

https://jsfiddle.net/gwjw0z9s/。

你必須特別選擇你想要的頂級文本鏈接。在這種情況下，我們使用>標誌來選擇a標籤，它們是.cat_link_container div的直接子標籤，它們是.cat_link div的直接子標籤。這使我們能夠排除.cat_sub_link div中的子鏈接。

Answer 2

它不工作，因爲你有多個cat_icon類，你的CSS代碼是針對每一個cat_icon這是正常的第一個孩子。

如果您想保留該結構，只需將一個類添加到要加粗的標記中即可。

<a class="bold" ... ></a> 

a.bold { font-weight: bold; } 

https://jsfiddle.net/sadikyalcin/xywm2tog/

Answer 3

.categories .cat_link > div:nth-child(1) a { 
 
    font-weight: bold; 
 
}

<div class="content-box-main-inner clearfix"> 
 
    <div class="categories"> 
 
     <div class="cat_icon"> <a href="/zum-kleben/"> 
 
      <img src="images/logos/item_ltr.gif" width="5" height="13" alt="Zum Kleben" title="Zum Kleben"/></a> 
 

 
     </div> 
 
     <div class="cat_link" style="padding-left:8px;"> 
 
      <div class="cat_link_container"> <a href="/zum-kleben/" class="cat-menu">Zum Kleben</a> 
 

 
      </div> 
 
      <div class="cat_icon"> <a href="/zum-kleben/Knoepfe-Klebehaken/"> 
 
       <img src="images/logos/item_ltr.gif" width="5" height="13" alt="Klebehaken" title="Klebehaken"/></a> 
 

 
      </div> 
 
      <div class="cat_sub_link" style="padding-left:8px;"> 
 
       <div class="cat_link_container"> <a href="/zum-kleben/Knoepfe-Klebehaken/" class="cat-menu">Klebehaken</a> 
 
       </div> 
 
      </div> 
 
      <div class="cat_icon"> <a href="/zum-kleben/Klebehacken--Sicherheitsfaden--Kombipack/"> 
 
          <img src="images/logos/item_ltr.gif" width="5" height="13" alt="Klebehacken &amp; Sicherheitsfaden (Kombipack)" title="Klebehacken &amp; Sicherheitsfaden (Kombipack)"></a> 
 

 
      </div> 
 
      <div class="cat_sub_link" style="padding-left:8px;"> 
 
       <div class="cat_link_container"><a href="/zum-kleben/Klettbaender/" class="cat-menu">Klettbänder selbstklebend</a> 
 

 
       </div> 
 
      </div> 
 
     </div> 
 
    </div> 
 
    <div class="categories"> 
 
     <div class="cat_icon"> <a href="/Zum-Heften/"> 
 
          <img src="images/logos/item_ltr.gif" width="5" height="13" alt="Zum Heften" title="Zum Heften"></a> 
 

 
     </div> 
 
     <div class="cat_link" style="padding-left:8px;"> 
 
      <div class="cat_link_container"> <a href="/Zum-Heften/" class="cat-menu">Zum Heften</a> 
 

 
      </div> 
 
      <div class="cat_icon"> <a href="/Zum-Heften/Pistolen/"> 
 
            <img src="images/logos/item_ltr.gif" width="5" height="13" alt="Heftpistolen/Etikettierpistolen" title="Heftpistolen/Etikettierpistolen"></a> 
 

 
      </div> 
 
      <div class="cat_sub_link" style="padding-left:8px;"> 
 
       <div class="cat_link_container"> <a href="/Zum-Heften/Pistolen/" class="cat-menu">Heftpistolen/Etikettierpistolen</a> 
 
       </div> 
 
      </div> 
 
     </div> 
 
    </div> 
 
    <div class="categories"> 
 
     <div class="cat_icon"> <a href="/zum-auf-und-abhaengen/"> 
 
            <img src="images/logos/item_ltr.gif" width="5" height="13" alt="Zum Auf- &amp; Abhängen" title="Zum Auf- &amp; Abhängen"></a> 
 

 
     </div> 
 
     <div class="cat_link" style="padding-left:8px;"> 
 
      <div class="cat_link_container"> <a href="/zum-auf-und-abhaengen/" class="cat-menu">Zum Auf- &amp; Abhängen</a> 
 

 
      </div> 
 
      <div class="cat_icon"> <a href="/zum-auf-und-abhaengen/Haken/"> 
 
              <img src="images/logos/item_ltr.gif" width="5" height="13" alt="Haken" title="Haken"></a> 
 

 
      </div> 
 
      <div class="cat_sub_link" style="padding-left:8px;"> 
 
       <div class="cat_link_container"> <a href="/zum-auf-und-abhaengen/Haken/" class="cat-menu">Haken</a> 
 

 
       </div> 
 
      </div> 
 
      <div class="cat_icon"> <a href="/zum-auf-und-abhaengen/Faeden/"> 
 
               <img src="images/logos/item_ltr.gif" width="5" height="13" alt="Sicherheitsfäden &amp; Kabelbinder" title="Sicherheitsfäden &amp; Kabelbinder"></a> 
 

 
      </div> 
 
      <div class="cat_sub_link" style="padding-left:8px;"> 
 
       <div class="cat_link_container"> <a href="/zum-auf-und-abhaengen/Faeden/" class="cat-menu">Sicherheitsfäden &amp; Kabelbinder</a> 
 

 
       </div> 
 
      </div> 
 
     </div> 
 
    </div>

Answer 4

.cat_link > .cat_link_container > a應該做的工作。 兒童組合器>首次在CSS級別2中定義，因此您可以獲得更好的瀏覽器支持，例如結構僞類別:nth-child(n)。在這裏你有w3c-spec for css selectors。

.cat_link > .cat_link_container > a { 
 
    font-weight: bold; 
 
}

<div class="content-box-main-inner clearfix"> 
 
    <div class="categories"> 
 
    <div class="cat_icon"> 
 
     <a href="/zum-kleben/"> 
 
     <img src="images/logos/item_ltr.gif" width="5" height="13" alt="Zum Kleben" title="Zum Kleben"></a> 
 
    </div> 
 
    <div class="cat_link" style="padding-left:8px;"> 
 
     <div class="cat_link_container"> 
 
     <a href="/zum-kleben/" class="cat-menu">Zum Kleben</a> 
 
     </div> 
 
     <div class="cat_icon"> 
 
     <a href="/zum-kleben/Knoepfe-Klebehaken/"> 
 
      <img src="images/logos/item_ltr.gif" width="5" height="13" alt="Klebehaken" title="Klebehaken"></a> 
 
     </div> 
 
     <div class="cat_sub_link" style="padding-left:8px;"> 
 
     <div class="cat_link_container"> 
 
      <a href="/zum-kleben/Knoepfe-Klebehaken/" class="cat-menu">Klebehaken</a>     </div> 
 
     </div> 
 
     <div class="cat_icon"> 
 
     <a href="/zum-kleben/Klebehacken--Sicherheitsfaden--Kombipack/"> 
 
      <img src="images/logos/item_ltr.gif" width="5" height="13" alt="Klebehacken &amp; Sicherheitsfaden (Kombipack)" title="Klebehacken &amp; Sicherheitsfaden (Kombipack)"></a> 
 
     </div> 
 
     <div class="cat_sub_link" style="padding-left:8px;"> 
 
     <div class="cat_link_container"><a href="/zum-kleben/Klettbaender/" class="cat-menu">Klettbänder selbstklebend</a> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="categories"> 
 
    <div class="cat_icon"> 
 
     <a href="/Zum-Heften/"> 
 
     <img src="images/logos/item_ltr.gif" width="5" height="13" alt="Zum Heften" title="Zum Heften"></a> 
 
    </div> 
 
    <div class="cat_link" style="padding-left:8px;"> 
 
     <div class="cat_link_container"> 
 
     <a href="/Zum-Heften/" class="cat-menu">Zum Heften</a> 
 
     </div> 
 
     <div class="cat_icon"> 
 
     <a href="/Zum-Heften/Pistolen/"> 
 
      <img src="images/logos/item_ltr.gif" width="5" height="13" alt="Heftpistolen/Etikettierpistolen" title="Heftpistolen/Etikettierpistolen"></a> 
 
     </div> 
 
     <div class="cat_sub_link" style="padding-left:8px;"> 
 
     <div class="cat_link_container"> 
 
      <a href="/Zum-Heften/Pistolen/" class="cat-menu">Heftpistolen/Etikettierpistolen</a></div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="categories"> 
 
    <div class="cat_icon"> 
 
     <a href="/zum-auf-und-abhaengen/"> 
 
     <img src="images/logos/item_ltr.gif" width="5" height="13" alt="Zum Auf- &amp; Abhängen" title="Zum Auf- &amp; Abhängen"></a> 
 
    </div> 
 
    <div class="cat_link" style="padding-left:8px;"> 
 
     <div class="cat_link_container"> 
 
     <a href="/zum-auf-und-abhaengen/" class="cat-menu">Zum Auf- &amp; Abhängen</a> 
 
     </div> 
 
     <div class="cat_icon"> 
 
     <a href="/zum-auf-und-abhaengen/Haken/"> 
 
      <img src="images/logos/item_ltr.gif" width="5" height="13" alt="Haken" title="Haken"></a> 
 
     </div> 
 
     <div class="cat_sub_link" style="padding-left:8px;"> 
 
     <div class="cat_link_container"> 
 
      <a href="/zum-auf-und-abhaengen/Haken/" class="cat-menu">Haken</a> 
 
     </div> 
 
     </div> 
 
     <div class="cat_icon"> 
 
     <a href="/zum-auf-und-abhaengen/Faeden/"> 
 
      <img src="images/logos/item_ltr.gif" width="5" height="13" alt="Sicherheitsfäden &amp; Kabelbinder" title="Sicherheitsfäden &amp; Kabelbinder"></a> 
 
     </div> 
 
     <div class="cat_sub_link" style="padding-left:8px;"> 
 
     <div class="cat_link_container"> 
 
      <a href="/zum-auf-und-abhaengen/Faeden/" class="cat-menu">Sicherheitsfäden &amp; Kabelbinder</a> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div>