父級中嵌套和非嵌套鏈接的特定樣式模式

Question

我在一個網站上工作，我想要一種特定的鏈接樣式樣式，但是我不知道該怎么做。

我基本上想要的是以下結果：

• 紅色鏈接

• 綠色鏈接

• 紅色鏈接

• 綠色鏈接

• …

這是我的HTML

<div id="aRandomDivforThisQuestion">
        <a href="#">a red link</a>
        <p>
            <a href="#">a green link</a>
            <a href="#">a red link again</a>
        </p>
        <a href="#">yet again a green link</a>
</div><!-- /aRandomDivForThisQuestion -->

……這就是我嘗試過的CSS，我知道從一開始就無法完成工作

#aRandomDivforThisQuestion a:nth-of-type(odd) {
    border-bottom: 1px solid red;
    color: red;
}

#aRandomDivforThisQuestion a:nth-of-type(even) {
    border-bottom: 1px solid #3DCD7C;
    color: #3DCD7C;
}

因此，簡而言之：我想要的是id為aRandomDivForThisQuestion的標記中的每個標記都遵循此模式，而不管它是div的子代還是div的子代……

你們可以幫我嗎？

PS：css解決方案，javascript解決方案，jquery解決方案……並不重要。

Answer 1

因此，首先，將內容包裝在ap元素中以繼承顯示屬性並不是一個好習慣。 即使您正在從事前端設計，您的代碼仍應根據數據/元素進行結構化。 如果您嘗試根據設計編寫代碼，這只會使您的工作變得更困難，而且將來將很難閱讀/更新。 在這種特定情況下，依賴P元素的屬性將導致副作用，並且您實際上可能最終會花費時間，試圖找出問題所在。

1）如果您需要對元素進行分組，請使用divs。

2）僅在合理的情況下進行分組。 如果這將有助於您進行明智的編碼（該組的子級將具有共同的屬性，等等）

回到您的問題。 嘗試使用

:nth-child()

一旦擺脫了

元件。

:nth-child(odd)

:nth-child(even)

在綠色和紅色之間切換，將為您完成所有工作

https://jsfiddle.net/dLh25u0r/1/

嵌套元素的jQuery解決方案：在此解決方案中，我使用：

 .each()

無論它們是否嵌套，它將遍歷所需的div內部的每個實例。 確保將代碼放入其中以使其運行。

 <script>
    $(document).ready(function(){
          //add the code
    })
 </script>

並導入jQuery

<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>

https://jsfiddle.net/8swLcdcz/

Answer 2

用CSS做到這一點的唯一方法是過於冗長（實際上，當我開始考慮時，這是不可能的）。 這是<p>那個F這個，因為標簽:nth-child只影響直接孩子......不是孫子和其他后代。 唯一的解決方案是使用javascript或將鏈接放在平面列表中，然后使用類名稱獲取所需的段落樣式：

<a href="#">link 1</a>
<a href="#" class="p-start">link 2</a>
<a href="#">link 3</a>
<a href="#" class="p-end">link 4</a>
<a href="#">link 5</a>

而這個CSS：

a { display: block }
a:nth-child(odd) { color: red }
a:nth-child(even) { color: green }
a.p-start { margin-top: 1em; }
a.p-end { margin-bottom: 1em; }

https://jsfiddle.net/r0b87pp4/1/

Answer 3

使用nth-child無效，因為您的鏈接不是同一元素的所有子節點；使用nth-of-type無效，因為每個新生代（節點的子代，子代）都擁有自己的“ -of” -type“ ...即重置為n 。

您可以使用javascript或jQuery將任意類附加到容器中的每個鏈接（任何給定DOM元素的子樹）上，包括主體中的每個鏈接。

給定一些<a>節點集和一些類來循環和附加，只要您有某種選擇的方式，節點的深度就無關緊要。

在jQuery中， $('#aRandomDivforThisQuestion a')將選擇div中的所有鏈接，而不選擇其他任何鏈接。 您可以使用$('body a')或僅使用$(a)來獲取頁面上的所有鏈接，或者使用$('.linkmap a')來獲取類中的所有鏈接，而不能獲取其他任何鏈接。

然后，遍歷節點列表並為每個節點分配一個類，然后根據需要的變體數量，每隔一個，或每隔三分之一等重新啟動一個類。 您可以只做['odd', 'even'] （其他所有鏈接）或['red', 'blue', 'green'] （其他每個鏈接）

這是一個獲取任意鏈接列表並對其應用任意類集的函數。 它比必要的更為冗長（可以合並行），但這種方式更清晰。
它需要一個jQuery元素列表和一個純JavaScript類名稱數組。

function stripe(elems, classes)
{
    var which = 0;
    $(elems).each(function(i, elem) {
        var addit = classes[which];
        which = (which + 1) % classes.length;
        $(elem).addClass(addit);
    });
}

在我的測試小提琴中看到它的作用，在其中我將兩個不同的類集應用於同一組節點，通過調用函數兩次，將每個其他鏈接設置為紅色/綠色，將每三個鏈接設置為粗體/斜體/下划線。

stripe( $('#aRandomDivforThisQuestion a'),
        [ 'odd', 'even' ] );

stripe( $('#aRandomDivforThisQuestion a'),
        [ 'bld', 'ital', 'undrln' ] );

Answer 4

/* unvisited link */
a:link {
    color: #FF0000;
}

/* visited link */
a:visited {
    color: #00FF00;
}

/* mouse over link */
a:hover {
    color: #FF00FF;
}

/* selected link */
a:active {
    color: #0000FF;
}