jquery/css 访问下面 HTML 中的以下 anchor 标记

Question

我有以下生成的 html 我想为元素应用 css“ST 程序”

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

#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