Question

从下面显示的html中我想选择所有奇数，li class =＆＃34; items-3＆＃34;，然后选择图片的三个描述，如下所示，使用其中任何一个，使用，** span data-picture =＆＃34;＆＃34; data-alt = ＆＃34; Red Range Rover Evoque＆＃34;＆gt; ，或使用img标签img alt = ＆＃34; Red Range Rover Evoque＆＃34; src =＆＃34; / Images / Evoque-Red-Street。

我尝试过以下css：

li.items-3：第一个孩子div：第一个孩子一个跨度[data-alt]：第一个孩子

给了我：

span data-picture =＆＃34;＆＃34; data-alt =＆＃34; Red Range Rover Evoque＆＃34;类=＆＃34;＆＃34;

但是我似乎无法获得data-alt值，我已经尝试过下面的css，但这并没有，

li.items-3：first-child div：first-child a span [data-alt]：first-child＆gt;跨度[数据 - 交替＆GT;

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

由于

 <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/

CSS Selector无序列表图像名称

1 个答案: