ul要素の幅をselect2-複数の要素に変更する

Question

シンプルセレクト2コンポーネントがあります。

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

これは複数選択です。コード$("#mydd").select2();を実行すると、select2構造体内に "select2-selection__rendered"というクラスでul要素が追加されます。

何らかの理由で、このコンポーネントの幅を変更しようとしています。私は試しました

.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

は... Selectセレクトの幅を適用しているかを確認するには

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

Answer 2

チェックを、それを手に入れました。 HTMLスタイル属性を使用して同じインラインスタイルをレンダリングされた.select2-selection__rendered要素にコピーしている場合、CSSセレクタでそれをオーバーライドすることはできません。 Webインスペクタで計算されたスタイルを調べ、値がどのように適用されているかを調べます。基本的にhttps://www.smashingmagazine.com/2007/07/css-specificity-things-you-should-know/#specificity-hierarchy

、それを考えるこの方法：

• CSSスタイルの計算規則に関する多くの記事インラインスタイル、セレクタの特異性、などこれはかなり簡単読まれるの&の優先順位があります。セレクタにはID、クラス、&の要素（擬似クラス&の擬似要素も存在しますが、簡潔にするために省略しています;詳細については、私が投稿した記事や他の記事を読んでください） 。

• どのCSSルールが優先されるかを判断するときは、各セレクタタイプの数をカウントアップします。そして、最も多くのIDを持つルールが勝ちます。 IDの数が一致すれば、最もクラス数の多いルールが勝ちます。 IDの数が&の場合、クラスの数が一致すれば、最も要素の多いルールが勝ちます。
• インラインスタイルは他のCSSセレクタよりも優先されます。あなたがHTMLやJSの中でそれらを設定している場合、あなたは他の場所であなたのCSSを壊すことに注意してください。
• ！あなたもできることは大事ですが、それはかなり普遍的に恐ろしい習慣とみなされますので、私はそれをスキップします。