我正在尝试使元素 li.active-trail 中只有第一个子元素的背景变为深蓝色（右键单击->检查样式中的背景属性）。
然而，似乎代码选择了所有的，因为每个都是 li.active-trail 内的
如果我想这样做，我可能会这样做：li [class*="sf-depth-"]:first-child
但我做到了：li.active-trail [class*="sf-depth-"]:first-child - 因为我特别希望 li.active-trail 的第一个孩子是黑暗的！
ul.sf-menu.sf-style-blue {
float: left;
margin-bottom: 1em;
padding: 0;
}
ul.sf-menu.sf-style-blue.sf-navbar {
width: 100%;
}
ul.sf-menu.sf-style-blue ul {
margin: 0;
padding: 0;
}
ul.sf-menu.sf-style-blue a,ul.sf-menu.sf-style-blue a:visited,ul.sf-menu.sf-style-blue span {
border: 0 none;
color: #076698;
padding: 0.75em 1em;
}
ul.sf-menu.sf-style-blue a.sf-with-ul,ul.sf-menu.sf-style-blue span.sf-with-ul {
padding-right: 2.25em;
}
ul.sf-menu.sf-style-blue.rtl a.sf-with-ul,ul.sf-menu.sf-style-blue.rtl span.sf-with-ul {
padding-left: 2.25em;
padding-right: 1em;
}
ul.sf-menu.sf-style-blue span.sf-description {
color: #ffffff;
display: block;
font-size: smaller;
line-height: 1.5;
margin: 0.25em 0 0 0;
padding: 0;
}
ul.sf-menu.sf-style-blue li,ul.sf-menu.sf-style-blue.sf-navbar {
background: linear-gradient(to bottom,#c1eaff 0%,#3d3d3d 40%,#3d3d3d 60%,#c1eaff 100%) !important;
}
ul.sf-menu.sf-style-blue li li,ul.sf-menu.sf-style-blue.sf-navbar > li > ul {
background: #0151a4;
}
ul.sf-menu.sf-style-blue li li li {
background: #00478f;
}
ul.sf-menu.sf-style-blue a:focus,ul.sf-menu.sf-style-blue a:hover,ul.sf-menu.sf-style-blue a:focus span,ul.sf-menu.sf-style-blue a:hover span,ul.sf-menu.sf-style-blue span:focus,ul.sf-menu.sf-style-blue span:hover,ul.sf-menu.sf-style-blue span:focus span,ul.sf-menu.sf-style-blue span:hover span {
background: #368fbd !important;
color: #ffffff;
outline: 0;
}
.sf-menu.sf-style-blue.sf-navbar li ul {
background: #3270c5;
}
.sf-menu.sf-style-blue.sf-navbar li ul li ul {
background: transparent;
}
div.sf-accordion-toggle.sf-style-blue a {
background: #c1eaff;
color: #076698;
display: inline-block;
font-weight: bold;
padding: 1em 3em 1em 1em;
position: relative;
}
div.sf-accordion-toggle.sf-style-blue > a:after {
content: "≡";
font-size: 2em;
position: absolute;
right: 0.5em;
top: 50%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
speak: none;
}
div.sf-accordion-toggle.sf-style-blue a.sf-expanded,ul.sf-menu.sf-style-blue.sf-accordion li.sf-expanded {
background: #3270c5;
}
div.sf-accordion-toggle.sf-style-blue a.sf-expanded,ul.sf-menu.sf-style-blue.sf-accordion li.sf-expanded > a,ul.sf-menu.sf-style-blue.sf-accordion li.sf-expanded > span {
font-weight: bold;
}
ul.sf-menu.sf-style-blue.sf-accordion li a.sf-accordion-button {
font-weight: bold;
position: absolute;
right: 0;
top: 0;
z-index: 499;
}
ul.sf-menu.sf-style-blue.sf-accordion li li a,ul.sf-menu.sf-style-blue.sf-accordion li li span {
padding-left: 2em;
}
ul.sf-menu.sf-style-blue.sf-accordion li li li a,ul.sf-menu.sf-style-blue.sf-accordion li li li span {
padding-left: 3em;
}
ul.sf-menu.sf-style-blue.sf-accordion li li li li a,ul.sf-menu.sf-style-blue.sf-accordion li li li li span {
padding-left: 4em;
}
ul.sf-menu.sf-style-blue.sf-accordion li li li li li a,ul.sf-menu.sf-style-blue.sf-accordion li li li li li span {
padding-left: 5em;
}
ul.sf-menu.sf-style-blue.rtl.sf-accordion li li a,ul.sf-menu.sf-style-blue.rtl.sf-accordion li li span {
padding-left: auto;
padding-right: 2em;
}
ul.sf-menu.sf-style-blue.rtl.sf-accordion li li li a,ul.sf-menu.sf-style-blue.rtl.sf-accordion li li li span {
padding-left: auto;
padding-right: 3em;
}
ul.sf-menu.sf-style-blue.rtl.sf-accordion li li li li a,ul.sf-menu.sf-style-blue.rtl.sf-accordion li li li li span {
padding-left: auto;
padding-right: 4em;
}
ul.sf-menu.sf-style-blue.rtl.sf-accordion li li li li li a,ul.sf-menu.sf-style-blue.rtl.sf-accordion li li li li li span {
padding-left: auto;
padding-right: 5em;
}
ul.sf-menu.sf-style-blue li.sf-multicolumn-wrapper ol,ul.sf-menu.sf-style-blue li.sf-multicolumn-wrapper ol li {
margin: 0;
padding: 0;
}
ul.sf-menu.sf-style-blue li.sf-multicolumn-wrapper a.menuparent,ul.sf-menu.sf-style-blue li.sf-multicolumn-wrapper span.menuparent {
font-weight: bold;
}
ul.sf-style-blue [class*="sf-depth-"],#superfish-main-toggle {
background: #c1eaff;
}
ul.sf-style-blue li.active-trail a[class*="sf-depth-"]:first-child,ul.sf-style-blue li.active-trail span[class*="sf-depth-"]:first-child {
background: #91d7fd;
}
ul.sf-style-blue ul li ul li [class*="sf-depth-"] {
background: #e7f7ff;
}<ul id="superfish-main" class="menu sf-menu sf-main sf-horizontal sf-style-blue sf-js-enabled sf-shadow">
<li id="main-menu-link-contente4a4631e-985c-4020-a5a3-cc75a185515e" class="active-trail sf-depth-1 menuparent">
<a href="/sustantivas" class="sf-depth-1 menuparent sf-with-ul">Áreas sustantivas<span class="sf-sub-indicator"> »</span></a>
<ul class="sf-hidden" style="float: none; width: 15em; display: block;">
<li id="main-menu-link-content93839a29-bc0e-4610-9b18-6f607402b21b" class="sf-depth-2 sf-no-children" style=""><a href="/accionsocial" class="sf-depth-2" style="">acción Social</a></li>
<li id="main-menu-link-contentd657b847-c069-48e8-ac8b-e0d53385f381" class="active-trail sf-depth-2 menuparent" style="">
<a href="/investigacion" class="sf-depth-2 menuparent sf-with-ul" style="">Investigación<span class="sf-sub-indicator"> »</span></a>
<ul class="sf-hidden" style="left: 100%; float: none; width: 15em; display: block;">
<li id="main-menu-link-content78ac704c-a8ec-4c66-9f56-4fa2fcb43363" class="active-trail sf-depth-3 sf-no-children" style=""><a href="/revista" class="is-active sf-depth-3" style="">Revista Educación</a></li>
<li id="main-menu-link-content1821fb41-d94c-41ed-b37a-4341525d76d3" class="sf-depth-3 sf-no-children" style=""><a href="/observatorios" class="sf-depth-3" style="">Observatorios</a></li>
</ul>
</li>
<li id="main-menu-link-content2e770e8a-41d5-4618-b4d2-0aa5d4f8591f" class="sf-depth-2 menuparent" style="">
<span class="sf-depth-2 menuparent nolink sf-with-ul">Docencia<span class="sf-sub-indicator"> »</span></span>
<ul class="sf-hidden" style="left: 100%; float: none; width: 15em;">
<li id="main-menu-link-content64838b6d-495f-4574-825d-55f98026d5b3" class="sf-depth-3 sf-no-children" style=""><a href="/carreras-acreditadas" class="sf-depth-3" style="">Carreras Acreditadas</a></li>
<li id="main-menu-link-content47b43bf2-48f1-4c9b-b23c-ca04b03212e2" class="sf-depth-3 sf-no-children" style=""><a href="/carreras-desconcentradas" class="sf-depth-3" style="">Carreras Desconcentradas</a></li>
</ul>
</li>
<li id="main-menu-link-content68b4ea4e-edf4-4d91-af6f-d0bf65a5fbec" class="sf-depth-2 menuparent" style="">
<a href="/cifras" class="sf-depth-2 menuparent sf-with-ul" style="">Facultad en Cifras<span class="sf-sub-indicator"> »</span></a>
<ul class="sf-hidden" style="left: 100%; float: none; width: 15em;">
<li id="main-menu-link-content68158ebc-1783-4632-b518-3ba1db6257d7" class="sf-depth-3 sf-no-children" style=""><a href="/matricula-ciclo-lectivo-17-19" class="sf-depth-3" style="">Matrícula por ciclo lectivo</a></li>
</ul>
</li>
<li id="main-menu-link-content87351a83-53e9-4afa-b218-af975b7e8a88" class="sf-depth-2 sf-no-children" style=""><a href="/difusion" class="sf-depth-2" style="">II Jornada de Difusión</a></li>
</ul>
</li>
</ul>