使用 css 将第一个 a-tag 设置为粗体

Question

我有一个固定的 html 结构，我只想在 "categories" [=40= 中的第一个 href-Tag 设置粗体]

在我的示例代码中，我喜欢将此链接设置为粗体：

祖姆克莱本
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/.

您必须非常具体 select 您想要的顶级文本链接。在这种情况下，我们将 > 符号用于 select a 标记，这些标记是 .cat_link_container div 的直接子标记，后者又是 .cat_link_container div 的直接子标记一个 .cat_link div。这允许我们排除 .cat_sub_link div 中的子链接。

Answer 2

它不起作用，因为您有多个 cat_icon class，并且您的 CSS 代码针对每个 cat_icon 中的第一个 child，这是正常的.

如果您想保留该结构，只需在要加粗的标签中添加 class。

<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 应该可以胜任。 child combinator > 最初是在 CSS level 2 中定义的，因此与 structural pseudo-[=29] 一样，您拥有更好的浏览器支持=] :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>

使用 css 将第一个 a-tag 设置为粗体

set first a-tag on bold with css

css

css-selectors