應用不同風格的第一個ul與類名

我有以下的HTML結構。我想選擇類名爲'second class'的第一個ul，並應用與第二個ul具有相同類名的寬度。應用不同風格的第一個ul與類名

<div> 
    <div class='Link1'> 
     <a>Products</a> 
     <div class = 'firstClass'> 
      <ul class='secondClass'> 
       <li></li> 
       <li></li> 
      </ul> 
     </div> 
    </div> 
    <div class='Link1'> 
     <a>Tools</a> 
     <div class = 'firstClass'> 
      <ul class='secondClass'> 
       <li></li> 
       <li></li> 
      </ul> 
     </div> 
    </div> 
<div>

我曾嘗試低於CSS，但沒有工作。

.Link1 > .firstClass > ul.secondClass:first-child{ 
    width:750px; 
}

來源

2017-06-26 PRR

你可以只嘗試'ul.secondClass：first-child {width：750px; '，看看是否有用，並從那裏出發？ – Ben

@Ben我認爲這將選擇兩個，因爲他們都是他們的父母的第一個孩子 – Tony

僅使用CSS，在應用於一個元素之後無法停止應用規則。這基本上意味着

.Link1 > .firstClass > ul.secondClass:first-child

將應用於與該選擇器匹配的所有元素。

但是，您可以使用JavaScript很容易地應用不同的類只有第一場比賽：

var firstMatch = document.querySelector('.Link1 > .firstClass > ul.secondClass:first-child'); 
firstMatch.className = firstMatch.className + ' additionalClass';

...，當然，你需要風格你的CSS的additionalClass：

.Link1 > .firstClass > ul.secondClass.additionalClass:first-child { 
    /* CSS here */ 
}

使用jQuery，這將是：

$('.Link1 > .firstClass > ul.secondClass:first-child').first().addClass('additionalClass');

這是working example，而不是the original, not working。

來源

2017-06-26 19:04:15

雖然我沒有嘗試Jquery解決方案，然後發佈問題。您的解決方案現在適用於我。我曾嘗試過託尼早些時候發佈的內容，但它並不適合我。 – PRR

應用不同風格的第一個ul與類名

回答

相關問題