用於輸入的CSS [type =「submit」]

在我開始哭泣之前，有人能解釋一下爲什麼沒有一個嘗試CSS樣式化提交按鈕有什麼作用？我已經走了font-size: 50px，使之明顯，如果我打右元素，我還沒：用於輸入的CSS [type =「submit」]

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">

來源

2016-11-10 Robin

第一個工作。另外兩個是沒有意義的（空間意味着你將目標放在班級內部的按鈕**上，而不是你的班級應用於按鈕）。你的瀏覽器是什麼？ –

看到[在這個小提琴]（https://jsfiddle.net/6t9bkdkk/），第一個工程。 – lampshade

這一個確實工作。

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所以他們不會匹配，因爲左手側的輸入匹配，則右側匹配任何操作，因爲輸入不能繁衍後代。

來源

2016-11-10 10:59:18 Quentin

作爲一個側面說明，這似乎不工作的原因是在Chrome上緩存。我做了一個硬頁面重新加載，它的工作。 – Robin

空格字符在CSS中是Descendant Combinator。它告訴你的CSS編譯器選擇前一個選擇器的任何後代。

你目前選擇做的是試圖用含有.wysija-submit.wysija-submit-field一個class屬性選擇的任何元素，那麼它試圖找到一個input元素，其type是提交內該元素。這將在下面的標記工作：

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

爲了得到這個選擇input元素，其type是提交和其class包含wysija提交和wysija提交場，你你要用你的選擇從改變：

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

要：

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

來源

2016-11-10 10:57:58

非常感謝！你能解釋一下這背後的邏輯嗎？ – Robin

@Robin我已經更新了我的答案。希望這可以解決問題。 –

@Robin在側面說明上我寫了一個小型Web應用程序，它試圖揭示CSS選擇器在做什麼。這可以在https://selectors.io找到。粘貼你的選擇器會告訴你CSS編譯器正在試圖用它來做什麼。 –

用於輸入的CSS [type =「submit」]

回答

相關問題