Что такое вход № отправить?

Question

Я изучаю CSS3 и HTML5 из книги Джона Дакетта 'HTML & CSS'. Я наткнулся на этот CSS код:

input#submit{
color: #444444;
text-shadow: 0px 1px 1px #ffffff;
border-bottom: 2px solid #b2b2b2;
background-color: #b9e4e3;
}

<input type="submit" value="submit">

Я знаю, что #submit является селектором идентификатора, но я не назначил никакого идентификатора для input в приведенном выше коде, тогда как input#submit работал, а также, если я удаляю #submit вид кнопки меняется, почему?

Answer 1

Это вопрос о базовых c селекторах

input {
    ...
}

стилями всех элементов типа input. В то время как

input#submit {
    ...
}

обрабатывает все входные данные с атрибутом id submit.

См .:

input#submit{
color: #444444;
text-shadow: 0px 1px 1px #ffffff;
border-bottom: 2px solid #b2b2b2;
background-color: #b9e4e3;
}

/*attribute css selector*/
input[type="submit"] {
color: white;
text-shadow: 0px 1px 1px #ffffff;
border-bottom: 2px solid #b2b2b2;
background-color: blue;
}

/*element selector*/
input {
color: white;
text-shadow: 0px 1px 1px #ffffff;
border-bottom: 2px solid #b2b2b2;
background-color: orange;
}

<p>This will be styled be the id selector input#submit</p>
<input id="submit" type="submit" value="Submit">
<p>This will be styled by the attribute selector input[type="submit"]</p>
<input type="submit" value="Submit 2">
<br />
<p>This will be styled by input element selector</p>
<input type="button" value="Submit 3">

Удаление #submit из вашего селектора находит кнопку ввода для его стилизации. Также, если вы добавите id = "submit" к кнопке ввода, он получит те же стили. Возможно, вы нашли MDN , чтобы узнать о CSS, селекторах и т. Д. c.