Question

我很简单选择2个组件。

<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来维护更清晰的代码。我错过了什么？

Answer 1

检查Select2如何应用宽度。如果它通过HTML样式属性将相同的内联样式复制到呈现的.select2-selection__rendered元素，那么您只是无法使用CSS选择器覆盖它。在Web检查器中查看计算出的样式，以了解如何应用这些值。

有很多关于CSS样式计算规则的文章＆amp;内联样式的优先级，选择器特异性等。这是一个非常简单的读物：https://www.smashingmagazine.com/2007/07/css-specificity-things-you-should-know/#specificity-hierarchy

基本上，以这种方式思考：

有几种类型的选择器：ID，类和＆amp;元素（伪类和伪元素也存在，但为了简洁我会跳过它们;如果你想了解更多关于它们的信息，请阅读我发布的文章或其他地方。）
确定哪个CSS规则优先时，请计算每个选择器类型的数量。然后，ID最多的规则获胜;如果ID的数量匹配，则具有最多类的规则获胜;如果ID和数量类的数量匹配，则具有最多元素的规则获胜。
内联样式会覆盖其他CSS选择器。因此，如果您在HTML或JS中设置它们，请注意您将在其他地方破坏您的CSS。
！重要也是你可以做的事情，但它被普遍认为是可怕的做法，所以我会跳过它。

Answer 2

得到了..

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

更改ul2元素的select2-multiple组件的宽度

2 个答案: