選擇第一課後，在一個特定的類

在以下標記中，我想申請CSS只有與類.box，其中緊跟在.wrap之後。如果它在<p>或.wrap以外的任何其他類之後，我不想選擇它。選擇第一課後，在一個特定的類

<div class="wrap"> 
    <div class="box">Apply style to this box</div> 
    <p>random</p> 
    <div class="box">Do not apply style to this box</div> 
</div>

我試圖看看鄰接的兄弟選擇器，但似乎並沒有在這種情況下工作。

.wrap + .box{ 
    background: red; 
}

的jsfiddle：http://jsfiddle.net/8fjuz7sm/

我不能使用:first-child，因爲它只能出現一次了。

來源

2014-09-04 user1355300

寫：

.wrap .box:first-of-type{ 
    background:red; 
}

DEMO here。

.wrap .box:nth-of-type(1){ 
    background:red; 
}

DEMO here。

來源

2014-09-04 08:01:15 Hiral

作爲@Hiral說，你必須使用first-of-type或nth-of-type(1)。

如果你不能做到這一點，但可以訪問HTML，你就必須到其他類添加到您希望應用類上的元素，如

<div class="wrap"> 
<div class="box red">Apply style to this box</div> 
<p>random</p> 
<div class="box">Do not apply style to this box</div> 
</div>

，或者您可以使用JavaScript和/或jquery選擇第一個元素，然後通過javascript應用樣式。

jQuery的實例

$(".wrap .box").eq(0).css("Background-color","red")

來源

2014-09-04 08:03:13 LiamHT

我編輯您的jsfiddle：http://jsfiddle.net/8fjuz7sm/4/

我建議使用jQuery這是因爲舊的瀏覽器可能不支持純CSS解決方案：

創建一個新班級：

.wrapperbox { 
    background: red; 
}

那麼這個jQuery代碼添加到您的腳本：與類包裹其中有一個孩子箱將獲得一類wrapperbox

$(".wrap > .box:first").addClass("wrapperbox");

在此之後所有的HTML元素，在那裏，你可以做你的CSS

當你不想做的jQuery，你可以使用這個：

.wrap .box:first-of-type{ 
    background:red; 
}

這將選擇包的第一個孩子與類名框中，然後做喲你的css

來源

2014-09-04 08:04:58 orbatschow

選擇第一課後，在一個特定的類

回答

相關問題