目標首先在`ul`裏用css具有特定類別'li`只有

是否有可能針對ul內部具有特定類別的第一個li？例如：目標首先在`ul`裏用css具有特定類別'li`只有

<ul> 
    <li class="a"></li> <!-- I want to target this li --> 
    <li class="a"></li> 
    <li class="a"></li> 
    <li class="b"></li> <!-- and this li --> 
    <li class="b"></li> 
    <li class="b"></li> 
</ul>

有什麼可能嗎？

來源

2017-01-02 Era

什麼是你'specific'類的定義是什麼？因爲它們不是唯一的。此外，你是否正在尋找類名稱中的任何「改變」？ – karthikr

[有用]（http://stackoverflow.com/questions/2717480/css-selector-for-first-element-with-class） –

我會說添加id到html，但然後再次，我不知道是否改變HTML甚至可能在你的情況。 – 2017-01-02 06:39:20

使用:first-child僞類和adjacent sibling selector +。

.a:first-child, /* Select the first child element */ 
 
.a + .b { /* Select the first element with 'b' class */ 
 
    background-color: dodgerblue; 
 
}

<ul> 
 
    <li class="a"></li> 
 
    <li class="a"></li> 
 
    <li class="a"></li> 
 
    <li class="b"></li> 
 
    <li class="b"></li> 
 
    <li class="b"></li> 
 
</ul>

來源

2017-01-02 07:14:48 Ricky

嘗試選擇：第n個孩子（）和：第一胎

ul li:first-child { 
//some css 
}

和

ul li:nth-child(4) { 
//some css 
}

來源

2017-01-02 06:27:39

如果事先不知道類「b」的第一個已知位置怎麼辦？ –

我沒有這兩個李的確切位置 – Era

你不能class作爲參數first-child選擇。請使用~運營商來選擇相反。即適用於除第一個孩子之外的休息方式。

li.a, li.b{ 
 
color: green; /*your styles for first elemenets*/ 
 
} 
 
li.a ~ .a { /*differentiate rest of them from first*/ 
 
    color: black; 
 
} 
 
li.b ~ .b { 
 
    color: black; 
 
}

<ul> 
 
    <li class="a">1</li> 
 
    <!-- I want to target this li --> 
 
    <li class="a">2</li> 
 
    <li class="a">3</li> 
 
    <li class="b">4</li> 
 
    <!-- and this li --> 
 
    <li class="b">5</li> 
 
    <li class="b">6</li> 
 
</ul>

來源

2017-01-02 06:40:13

一般情況下，您只能將一個元素，在它命名的屬性的值，或元素的屬性的名稱。所以，我會說答案可能是......不是？（僅限於我自己的知識）

話雖這麼說..

這將有可能以插入要針對空<li>之前的每個項目？

如果是這樣，您可以輕鬆地選擇這些項目，像這樣：

ul li { 
 
    color: red 
 
} 
 
li:empty { 
 
    display: none 
 
} 
 
li:empty + li { 
 
    color: green 
 
}

<ul> 
 
    <li></li> 
 
    <li class="a">1</li> <!-- I want to target this li --> 
 
    <li class="a">2</li> 
 
    <li class="a">3</li> 
 
    <li></li> 
 
    <li class="b">4</li> <!-- I want to target this li --> 
 
    <li class="b">5</li> 
 
    <li class="b">6</li> 
 
</ul>

來源

2017-01-02 06:53:27

目標首先在`ul`裏用css具有特定類別'li`只有

回答

相關問題