我需要選擇（不是最後一個孩子），只有當它有特定的類

我有以下代碼：我需要選擇（不是最後一個孩子），只有當它有特定的類

<td><img src="img/product.jpg" height="40" width="40"/></td> 
<td>Triple monochromator for Raman</td> 
<td><a href="i"></a></td> 
<td> 
<a class="action--edit"><i class="icon-building"></i></a> 
<a class="action--delete"><i class="icon-building"></i></a> 
<a class="action--view"><i class="icon-building"></i></a> 
</td>

我需要什麼：

填充左添加到錨帶班即開始行動，而不是最後一個孩子

選擇錨（不是最後一個）工作原理：

a:not(:last-child) { 
    padding-right: 5px; }

ŧ RY獲得也是類不起作用

a[class^=action--]:not(:last-child) { 
     padding-right: 5px; }

或

a:not(:last-child) [class^=action--] { 
     padding-right: 5px; }

來源

2017-12-18 user3541631

'一個[^類=行動 - ]：不是（：最後一個孩子）'應該工作。您的問題陳述不符合您實際需要的內容，或者您的HTML沒有。還要記住，默認情況下，元素是內聯的，並且填充對內聯元素的作用不同。確保你的元素是顯示：塊。 – BoltClock

代替將padding-right，除了最後一個的一切，你可以申請padding-left一切除了第一個。這將使您的代碼更直觀，更易於閱讀。

檢查了這一點：

a[class^=action--] + a { 
    padding-left: 5px; 
}

a[class^=action--] + a { 
 
    padding-left: 5px; 
 
}

<table> 
 
    <tr> 
 
     <td><img src="http://via.placeholder.com/350x150" height="40" width="40" /></td> 
 
     <td>Triple monochromator for Raman</td> 
 
     <td> 
 
      <a href="i"><img src="http://via.placeholder.com/24x24"/></a> 
 
     </td> 
 
     <td> 
 
      <a class="action--edit"><i class="icon-building"><img src="http://via.placeholder.com/16x16"/></i></a> 
 
      <a class="action--delete"><i class="icon-building"><img src="http://via.placeholder.com/16x16"/></i></a> 
 
      <a class="action--view"><i class="icon-building"><img src="http://via.placeholder.com/16x16"/></i></a> 
 
     </td> 
 
    </tr> 
 
</table>

對Adjacent Sibling Selector 讀操作，+意味着「緊隨其後每隔a[class^=action--]後a：所以它適用於所有圖標，第一個除外

來源

2017-12-18 09:46:40

但他說**不是最後一個孩子** ..除第一個以外 –

@TemaniAfif，除了最後一個以外，你可以對所有的東西都應用'padding-right'，*或者*應用'padding-left'除外第一個。結果看起來是一樣的，第二個選項更直觀，更易於閱讀。 –

啊！所以你應該說:)因爲我沒有支付意向的CSS但只有選擇器;） –

-2

看着CSS選擇一類屬性的定義W3，你應該把你正在試圖引號從而匹配字符串...

a[class^="action--"]:not(:last-child) { 
     padding-right: 5px; }

僅供參考，請參閱此頁...... https://www.w3schools.com/cssref/sel_attr_begin.asp

來源

2017-12-18 09:48:06 PillHead

這似乎並沒有排除最後的錨雖然。 –

你不需要報價。 – BoltClock

指定選擇的範圍應如下所示：

a[class^="action--"]:not(:last-child) { ... }

使用屬性選擇結合所述插入符號符號以指定字符串的開頭，
然後連鎖:not()negation僞類選擇與括號之間指定的 :last-child僞類選擇器，
驗證旨在靶向元件實際上之中指定的元素範圍的最後嵌套元素（嵌入下面代碼段調整爲證明這一點）

代碼片段演示：

a[class^="action--"]:not(:last-child) { 
 
    padding-left: 30px; 
 
}

<table> 
 
    <tr> 
 
    <td><img src="img/product.jpg" height="40" width="40" /></td> 
 
    <td>Triple monochromator for Raman</td> 
 
    <td> 
 
     <a href="i"></a> 
 
    </td> 
 
    <td> 
 
     <a class="action--edit"><i class="icon-building">icon "edit"</i></a> 
 
     <a class="action--delete"><i class="icon-building">icon "delete"</i></a> 
 
     <a class="action--view"><i class="icon-building">icon "view"</i></a> 
 
    </td> 
 
    </tr> 
 
</table>

來源

2017-12-18 09:51:38 UncaughtTypeError

我認爲更好的添加一些真實的圖標或文字，並使用視覺屬性，以便我們可以看到結果immedialty;） –

提問者說這不起作用，所以我在想這個問題有什麼問題。 – BoltClock

謝謝你指出@BoltClock。 OP可能會遇到這個問題，因爲所討論的元素*實際上並不是最後發生的實例，在這種情況下，點＃3仍然適用。我現在將在此保存答案，等待OP對此的確認。 – UncaughtTypeError

-2

你不能有兩個僞選擇兩個:not和:last-child只有這樣你就不能使用這兩者的僞選擇。
相反，你可以使用這樣
a[class^=action--]{ padding-left: 5px; }
a[class^=action--]:last-child{
padding-left:initial;
}

來源

2017-12-18 09:51:44

檢查其他答案;） –

你*可以*有兩個僞，你當然*可以*有另一個僞：not（）。誰告訴你，否則只是補充。 – BoltClock

我需要選擇（不是最後一個孩子），只有當它有特定的類

回答

相關問題