即使元素嵌套在不同級別，也選擇頁面上的第一個元素

我正在使用CSS選擇器來練習。我知道我可以通過指定class或id做到這一點很容易，但對於演習的目的：我如果下面則無需使用這兩個CSS工具好奇：即使元素嵌套在不同級別，也選擇頁面上的第一個元素

想象一下，我有一個整體一堆p元素，並且每個p元素在未知塊類型元素中嵌套未知次數。最終，我想抓住頁面上出現的第一個p元素，並將其文本顏色設爲紅色。我會怎麼做？

我下面嘗試不起作用，因爲:first-of-type選擇只是抓住其父的第一p元素，這樣就不會在這裏幫我，因爲每個p元素有不同的父母，所以所有的頁面上的元素p獲取所選。

我也試圖換一個div內的一切，然後就抓住全球div中的第一個p元素，但沒有工作，要麼：

div:first-of-type p:first-of-type{ 
    color: red; 
}

p:first-of-type{ 
 
    color: red; 
 
}

<div> 
 
    <p> p element at one nesting</p> 
 
</div> 
 

 
<p> p element not nested</p> 
 

 
<h1> 
 
    <p> p element at one nesting (oddly nested inside h1 tag)</p> 
 
</h1> 
 

 
<div> 
 
    <div> 
 
    <p> p element at two nestings</p> 
 
    </div> 
 
</div>

來源

2016-08-30 Neil

我相信，如果你有HTML一個隨機位置第一個p，你目前不能做你正在嘗試做的沒有Javascript（但我希望有人證明我錯了） –

你必須知道標記才能實現你想要的 – dippas

，原因很簡單，CSS不關心DOM並且無法控制它。它只會調整如何顯示它。 – happymacarts

如果深度沒有指定並且沒有類別分配，則無需遍歷DOM就很難實現這個目標。使用Jus牛逼純醇香草CSS我不明白的方式來做到這一點，但使用一個微小的jQuery就可以實現它

var ps = $('p'); 
 

 
console.log(ps[0]) 
 
$(ps[0]).css('color', 'red')

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div> 
 
    <p> p element at one nesting</p> 
 
</div> 
 

 
<p> p element not nested</p> 
 

 
<h1> 
 
    <p> p element at one nesting (oddly nested inside h1 tag)</p> 
 
</h1> 
 

 
<div> 
 
    <div> 
 
    <p> p element at two nestings</p> 
 
    </div> 
 
</div>

來源

2016-08-30 16:52:53 happymacarts

即使元素嵌套在不同級別，也選擇頁面上的第一個元素

回答

相關問題