CSS：在HTML文檔中選擇特定類型元素的特定匹配

我想選擇CSS中特定類型元素的特定匹配樣式。CSS：在HTML文檔中選擇特定類型元素的特定匹配

例如：

<span>Some random stuff</span> 
<p>Occurrence 1 of p</p> 
<ul> 
<li>Random stuff</li> 
<li>More random stuff</li> 
</ul> 
<p>Occourence 2 of p</p> 
<span>Even more random stuff</span>

我想樣式Occourence 1和P 2以不同的方式，在外部CSS。我知道使用內聯CSS會更容易，但我需要在外部完成。另外，我知道我可以爲p的每個參數使用一個id或class，但是我想看看我能否找到一種方法來做到這一點。

來源

2017-05-25 MTMaster

你可以向這些元素添加類嗎？ – sheriffderek

無需添加ID或類，它聽起來就像你正在尋找的:nth-of-type CSS僞選擇：

p:nth-of-type(2) { 
 
    color: red; 
 
} 
 
li:nth-of-type(1) { 
 
    color: blue; 
 
}

<span>Some random stuff</span> 
 
<p>Occurrence 1 of p</p> 
 
<ul> 
 
    <li>Random stuff</li> 
 
    <li>More random stuff</li> 
 
</ul> 
 
<p>Occourence 2 of p</p> 
 
<span>Even more random stuff</span>

希望這有助於！ :)

來源

2017-05-25 23:54:08

這太棒了，如果我編輯我的代碼，我可以讓它工作。然而，是否有一個僞選擇器可以找到元素，即使你想選擇的元素在另一個元素內？例如，如果第二次出現的p是在一個div中，但第一次不是，並且我仍然可以使用相同的選擇器來選擇它們。再次，如果沒有，那很好，但如果有的話會更容易。 – MTMaster

絕對！僞選擇器可以與常規選擇器結合使用！只針對** **在'div'內的某些第n個'p'標籤，可以使用'div p：n-type-type（x）'。事先陳述'div'意味着它不會將不在'div'父母內部的'p'標籤作爲目標。你甚至可以使用'div> p：nth-of-type（x）'來定位**直接**後代的p標籤。 –

您可以使用:nth-of-type()選擇器來選擇您想要不同風格的一個。

p:nth-of-type(1) { 
    /* Code */ 
} 

p:nth-of-type(2) { 
    /* Code */ 
}

我知道你說你不想添加id，但你可以使用一個class識別元素。

HTML：

<span>Some random stuff</span> 
<p class="first">Occurrence 1 of p</p> 
<ul> 
<li>Random stuff</li> 
<li>More random stuff</li> 
</ul> 
<p class="second">Occourence 2 of p</p> 
<span>Even more random stuff</span>

CSS：

.first { 
    /* Code */ 
    } 

    .second { 
    /* Code */ 
    }

如果你只是想拿到第一<p>你可以p:first-of-type如：

p:first-of-type { 
    /* Code */ 
    }

有許多不同類型的選擇你可以選擇here。

來源

2017-05-25 23:55:23 jkys

CSS：在HTML文檔中選擇特定類型元素的特定匹配

回答

相關問題