更改select2多重組件的ul元素的寬度

我簡單地選擇了2個組件。更改select2多重組件的ul元素的寬度

<select name="Icecream Flavours" class="mydropdown" id="mydd" style="width:250px;" multiple = "multiple"></select>

這是一個多重選擇。如果我們運行代碼$("#mydd").select2();，我們將在select2結構中添加一個ul元素，並使用類「select2-selection__rendered」。

出於某種原因，我試圖改變這個組件的寬度。我試過

.select2-selection__rendered{width: 500px;} 
.select2-container--default .select2-selection--multiple .select2-selection__rendered {width: 500px;} 
.select2-container .select2-selection--multiple .select2-selection__rendere{width: 500px;}

沒有什麼似乎工作。

通過腳本，我可以覆蓋。但我想通過CSS來保持更乾淨的代碼。我錯過了什麼？

來源

2017-05-31 Agnivesh Reddy

-1

明白了..

.select2-selection--multiple ul {width: 400px !important;}

來源

2017-05-31 15:48:18

這不是一個好主意。使用'！important'通常是不完全理解CSS特性如何工作的一個症狀。使用'！重要'一直被認爲是不好的做法，可能只會回來咬你。通常你會用其他重要的聲明來結束前一個。「重要」規則一旦到位，也可能非常難以調試或調整。請爲了你的同事，甚至只是將來 - 你，我懇求你找到另一種方式:) –

檢查，看選擇二是如何應用的寬度。如果它通過HTML樣式屬性將相同的內聯樣式複製到呈現的.select2-selection__rendered元素，那麼您將無法使用CSS選擇器覆蓋它。在Web檢查器中查看您的計算樣式，以瞭解值的應用方式。

大約有CSS樣式計算規則多篇&優先內嵌樣式，選擇特異性，等等，這是一個非常簡單的讀：https://www.smashingmagazine.com/2007/07/css-specificity-things-you-should-know/#specificity-hierarchy

本質，認爲它是這樣的：

有幾種類型的選擇器：ID，類，&元素（僞類&僞元素也存在，但爲簡潔起見，我會跳過它們;如果您想了解更多關於它們的信息，請閱讀我發佈的文章或其他地方）。
確定哪個CSS規則優先時，請計算每個選擇器類型的數量。然後，具有最多ID的規則獲勝;如果ID的數量匹配，則類最多的規則勝出;如果類別數量匹配的ID號碼爲&，則具有最多元素的規則獲勝。
內聯樣式會覆蓋其他CSS選擇器。因此，如果您將它們設置爲HTML或JS，請注意您將在其他地方剽竊CSS。
！重要的也是你可以做的事情，但它被普遍認爲是可怕的做法，所以我會跳過它。

來源

2017-05-31 20:49:09

更改select2多重組件的ul元素的寬度

回答

相關問題