jquery/css 访问下面的锚标签 HTML

Question

我生成了以下内容 html 我想为元素应用 css "STPrograms"

我尝试使用以下 css 但它应用于 div 中的所有 li 元素，id 为 DeltaTopNavigation

#DeltaTopNavigation ul li a:first-child span span {
    color: #F7901E !important;
    font-size:large;
}

<div id="DeltaTopNavigation" class="ms-displayInline ms-core-navigation" role="navigation">
  <div id="zz12_TopNavigationMenu" class=" noindex ms-core-listMenu-horizontalBox">
  <ul id="zz13_RootAspMenu" class="root ms-core-listMenu-root static">
   <li class="static selected">
    <a class="static selected menu-item ms-core-listMenu-item ms-displayInline ms-core-listMenu-selected ms-navedit-linkNode" tabindex="0" href="/sites/STPrograms/SitePages/Home.aspx" accesskey="1">
     <span class="additional-background ms-navedit-flyoutArrow"><span class="menu-item-text">STPrograms</span>
      <span class="ms-hidden">Currently selected</span>
     </span>
    </a>
    <ul class="static">
    <li class="static"><a class="static menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode" tabindex="0" href="/sites/STPrograms/CBP Master/Forms/AllItems.aspx"><span class="additional-background ms-navedit-flyoutArrow"><span class="menu-item-text">Navigation1</span></span></a></li>
    </ul>
   </li>
   <li class="static ms-verticalAlignTop ms-listMenu-editLink ms-navedit-editArea"><span class="ms-navedit-editSpan" id="zz12_TopNavigationMenu_NavMenu_Edit"><a id="zz12_TopNavigationMenu_NavMenu_EditLinks" class="ms-navedit-editLinksText" href="#" onclick="g_QuickLaunchMenu = null; EnsureScriptParams('quicklaunch.js', 'QuickLaunchInitEditMode', 'zz12_TopNavigationMenu', 1, 1, 0, '\u002fSITES\u002fSTPROGRAMS'); cancelDefault(event); return false;"><span class="ms-displayInlineBlock"><span class="ms-navedit-editLinksIconWrapper ms-verticalAlignMiddle"><img class="ms-navedit-editLinksIcon" src="/_layouts/15/images/spcommon.png?rev=23"></span><span class="ms-metadata ms-verticalAlignMiddle">Edit Links</span></span></a><span id="zz12_TopNavigationMenu_NavMenu_Loading" class="ms-navedit-menuLoading ms-hide"><a id="zz12_TopNavigationMenu_NavMenu_GearsLink" href="#" onclick="HideGears(); return false;" title="This animation indicates the operation is in progress. Click to remove this animated image."><img id="zz12_TopNavigationMenu_NavMenu_GearsImage" src="/_layouts/15/images/loadingcirclests16.gif?rev=23"></a></span><div id="zz12_TopNavigationMenu_NavMenu_ErrorMsg" class="ms-navedit-errorMsg">
    </div></span>
   </li>
  </ul>
 </div>
</div>

Answer 1

尝试使用直接子选择器>

示例：

#DeltaTopNavigation > ul > li > a > span > span {
    color: #F7901E !important;
    font-size:large;
}

参考：https://developer.mozilla.org/en-US/docs/Web/CSS/Child_selectors

jquery/css 访问下面的锚标签 HTML

jquery/css to access the following anchor tag in the below HTML

css

sharepoint

jquery