CSS for input [type = "submit"]

Question

私が泣き始める前に、送信ボタンをスタイリングしようとしたCSSソートの何も効果がない理由を説明してもらえますか？ CSSで

input[type="submit"].wysija-submit { 
 
     border-radius: 10px; 
 
     border: none; 
 
     box-shadow: none; 
 
     font-family: inherit; 
 
     font-size: 50px!important; 
 
    } 
 
    
 
    .wysija-submit input[type="submit"] { 
 
     border-radius: 10px; 
 
     border: none; 
 
     box-shadow: none; 
 
     font-family: inherit; 
 
     font-size: 50px!important; 
 
    } 
 
    
 
    .wysija-submit.wysija-submit-field input[type="submit"] { 
 
     border-radius: 10px; 
 
     border: none; 
 
     box-shadow: none; 
 
     font-family: inherit; 
 
     font-size: 50px!important; 
 
    }

<input class="wysija-submit wysija-submit-field" type="submit" value="Sign-up"> 
 
    
 

Answer 1

これはです。です。

input[type="submit"].wysija-submit { 
 
    border-radius: 10px; 
 
    border: none; 
 
    box-shadow: none; 
 
    font-family: inherit; 
 
    font-size: 50px!important; 
 
}

<input class="wysija-submit wysija-submit-field" type="submit" value="Sign-up">

---

.wysija-submit input[type="submit"]と.wysija-submit.wysija-submit-field input[type="submit"]左手側は入力に一致するので、そう、彼らは一致しません入力は子孫を持つことができないので、その後、右側には何にもマッチしないdescendant combinatorsが含まれています。

Answer 2

空白文字がDescendant Combinatorです：私はまだ持っている右の要素を、ヒットした場合、私はそれを明らかにするfont-size: 50pxのために行ってきました。前のセレクタの子孫を選択するようにCSSコンパイラに指示します。

何あなたの現在のセレクタがやっていることは、そのtypeその要素内を提出あるinput要素を検索しようとしている、.wysija-submit.wysija-submit-fieldを含むclass属性を持つ任意の要素を選択しようとしています。これは、次のマークアップのために働くだろう：

<elem class="wysija-submit wysija-submit-field"> 
    <input type="submit" /> 
</elem> 

これはそのtypeあるとそのclasswysija-提出とwysija提出フィールドが含まれているを提出input要素を選択するために取得するには、

.wysija-submit.wysija-submit-field input[type="submit"] { ... } 

へ：「からあなたのセレクタを変更する必要があるでしょう

input[type="submit"].wysija-submit.wysija-submit-field { ... }