スペースセレクタの中にカンマセレクタを置くのがなぜ親を破るのですか？

Question

私は、子孫スペースセレクタとカンマセレクタの使用に慣れています。 jqueryとcssを簡単に操作するために、より大きな要素セットの周りにIDを持っています。

だから私はこのような何か試してみました：私はこれを行うとき

#parent_id input, textarea 
{ 
width: 100px; 
} 

だから、私の期待は、この効果は#parent_id内inputとtextareaに発生することです。代わりに、これはparent_idを失格とし、すべてinput、textareaを選択するだけです。どうして？そして、それらを別々にすることを除けば、どうすればこの問題を回避できますか？ CSSで

Answer 1

、ルールの形式は：

selector0 [, selectorN ]* 
{ 
    property0: value0[, 
    property1: value1]* 
} 

そこでコンマ,が同じプロパティ・セットの異なるセレクタを分離するために使用されます。たとえば、同じプロパティーセットに対して根本的に異なる2つのセレクターが必要だったとします。

CSSのセレクタは完全修飾でなければなりません。状況依存性はありません。これは、CSSが前方互換性を持つように設計されていることが原因の1つで、ブラウザーは、 - それらがサポートしていない新しいセレクタ構文に遭遇したときに、デグラデーションを実行します。

あなたはちょうどそれがCSSレベル4セレクタでだ、セレクタ内の論理OR演算子として働く提案/実験:matches()セレクタ機能があることをより多くの:)

#parent_id input, 
#parent_id textarea { 
    width: 100px; 
} 

メモを入力したい効果を得るために、仕様（現時点では、作業中のドラフト状態、2016-05-04：https://drafts.csswg.org/selectors-4/）。

matches-any擬似クラス：matches（）は、セレクタリストを引数として持つ機能的な擬似クラスです。引数で表される要素を表します。

だからあなたの場合には、それは次のようになります。

#parent_id :matches(input, textarea) { 
    width: 100px; 
} 

しかし、私はこの使用法は、より良い、それはあまり明らかだということは本当にあるとCSSの大きい知識を必要とは思いません。