複数の属性を持つネストされた要素のCSSセレクタを作成する

Question

受け取りテストの目的で、ページのdivにネストされたチェックボックスを選択しようとしています。ここで

は、私が見るかもしれないDOM構造の例です：

... 
<div class="section-1"> 
    ... 
    <input type="checkbox" name="type[12312][][]" value="1">Thing1</input> 
    <input type="checkbox" name="type[12312][][]" value="2">Thing2</input> 
    ... 
</div> 
... 

通常、私は特定のチェックボックスを選択するには、このような何かを行うことができます：

input[name*=type][value=1] 

しかし、私の場合は、私が必要特定のセクションのチェックボックス。ページの中には多くのものがあります。だから私は、次のように働くだろうと想定：

.section-1 input[name*=type][value=1] 

が、それはないを行います。

私の質問は以下のとおりです。

1. なぜそれは動作しませんか？
2. 入力を今すぐ選択するにはどうすればよいですか？

注：私は入力を取得するJSを使用することができますが、私は本当には、私は関数は要素の操作を処理するためのライブラリ（セレン）のを使用できるようにCSSセレクタを使用することを好むだろう。

Answer 1

これは動作します：

.section-1 input[name^="type"][value="2"] { 
 
    display: block; 
 
    margin: 25px; 
 
}

<div class="section-1"> 
 
    <input type="checkbox" name="type[12312][][]" value="1"> 
 
    <input type="checkbox" name="type[12312][][]" value="2"> 
 
</div>

は、あなたの属性値に引用符を追加してみてください。

また、input要素はvoid elementです。終了タグはなく、コンテンツを受け入れません。

Answer 2

あなたが子供に行きたい場合は>を使用する必要があります。 はセレン要素ロケータのためcssSelector下記の使用：ウル名前がタイプで始まるよう

.section-1 > input[name^= 'type'][value= '1'] 

私は^を使用します。

希望これはあなたを助けます。

Answer 3

これが失敗する原因となった属性値の引用符がありませんでした。仕様によれば、属性値は識別子または文字列のいずれかです。識別子には文字と数字を含めることができますが、ではなく、で始まる数字で始まる必要があります。これが失敗した理由です。