CSS Selector 无序列表图片名称

Question

从下面显示的 html 中，我想选择所有奇数编号，li class="items-3"，然后选择图片的三个描述，使用以下任一方式突出显示， 使用，** span data-picture=""data-alt="Red Range Rover Evoque">，或使用 img 标签 img alt="Red Range Rover Evoque"> src="/Images/Evoque-Red-Street。

我尝试了以下 css:

li.items-3:first-child div:first-child 跨度[data-alt]:first-child

这给了我:

span data-picture=""data-alt="红色揽胜极光"class=""

但我似乎无法获得 data-alt 值，我已经尝试了下面的 css，但那也不行，

li.items-3:first-child div:first-child 一个 span[data-alt]:first-child > span[data-alt>

如果有人能提出解决方案，我将不胜感激。

谢谢

 <ul class="mediaCarousel" style="text-align: left; float: none; position:   absolute; top: 0px; right: auto; bottom: auto; left: 0px; margin: 0px; width: 11693px; height: 842px;">
     <li class="items-3" style="width: 1063px;">
     <div class="el">
       <a href="/Images/Evoque-Red-Street-1200x600_tcm186-51405.jpg">
          <span data-picture="" data-alt=**"Red Range Rover Evoque">**
          <span data-src="/Images/Evoque-Red-Street-1200x600_tcm186-51405.jpg"></span>
          <span data-src="/Images/Evoque-Red-Street-1200x600_tcm186-51405.jpg" data-media="(max-width: 400px)"></span>
          <span data-src="/Images/Evoque-Red-Street-1200x600_tcm186-51405.jpg" data-media="(min-width: 1000px)">
               <img alt="Red Range Rover Evoque" src="/Images/Evoque-Red-Street-1200x600_tcm186-51405.jpg">
          </span>
          <noscript> 
                <img alt="Red Range Rover Evoque" src="/Images/Evoque-Red-Street-1200x600_tcm186-51405.jpg" /> 
          </noscript>
          </span>
        </a>
  </div>
  <div class="el width-1of2">
  <a href="/Images/Evoque-Outdoor-Cinema-600x350_tcm186-51407.jpg">
    <span data-picture="" data-alt="**Red Range Rover Evoque at an outdoor cinema**">
    <span data-src="/Images/Evoque-Outdoor-Cinema-600x350_tcm186-51407.jpg"></span>
    <span data-src="/Images/Evoque-Outdoor-Cinema-600x350_tcm186-51407.jpg" data-media="(max-width: 400px)"></span>
    <span data-src="/Images/Evoque-Outdoor-Cinema-600x350_tcm186-51407.jpg" data-media="(min-width: 1000px)">
         <img alt="Red Range Rover Evoque at an outdoor cinema" src="/Images/Evoque-Outdoor-Cinema-600x350_tcm186-51407.jpg">
  </span>
  <noscript> 
        <img alt="Red Range Rover Evoque at an outdoor cinema" src="/Images/Evoque-Outdoor-Cinema-600x350_tcm186-51407.jpg" /> 
  </noscript>
  </span>
  </a>
  </div>
  <div class="el width-1of2">
    <a href="/Images/Evoque-Front-View-Red-600x350_tcm186-51406.jpg">
    <span data-picture="" data-alt="**Red Range Rover Evoque Front View**">
    <span data-src="/Images/Evoque-Front-View-Red-600x350_tcm186-51406.jpg"></span>
    <span data-src="/Images/Evoque-Front-View-Red-600x350_tcm186-51406.jpg" data-media="(max-width: 400px)"></span>
    <span data-src="/Images/Evoque-Front-View-Red-600x350_tcm186-51406.jpg" data-media="(min-width: 1000px)">
    <noscript> 
         <img alt="Red Range Rover Evoque Front View" src="/Images/Evoque-Front-View-Red-600x350_tcm186-51406.jpg" />
   </noscript>
   </span>
   </a>
   </div>
   </li>
   <li class="items-1" style="width: 1063px;">
   <li class="items-3" style="width: 1063px;">
   <li class="items-1" style="width: 1063px;">
   <li class="items-3" style="width: 1063px;">
 </ul>

Answer 1

试试这个选择器:

li.items-3 span[data-alt*="Red Range Rover"]  span

很难用您的代码制作演示，但在这里您可以做到 http://jsfiddle.net/Y8Xr6/5/