Различия в этих синтаксисах для CSS? [закрыто]

Я хотел спросить, не могли бы вы помочь мне разобраться в том, что делают эти фактические синтаксические структуры в CSS, так как мне очень трудно разобраться в них.

A. Общий стиль для всех элементов ввода

#input
{
    width:100%;
    border: 1px solid #000;
    font-size: 14px;
    padding: none;
}

B. ??????

 .input
{
    width:100%;
    border: 1px solid #000;
    font-size: 14px;
    padding: none;
}

C. Ввод формы внутри элемента таблицы

table input
{
    width:100%;
    border: 1px solid #000;
    font-size: 14px;
    padding: none;
}

D. ???

table .input
{
    width:100%;
    border: 1px solid #000;
    font-size: 14px;
    padding: none;
}

E. ??????????

table input[type="text"] 
{
   width:100%;
   border: 1px solid #000;
   font-size: 14px;
   padding: none;
}

Правильно ли я понимаю, что все они достигают одного и того же результата в отношении размещения элемента "input"?

Каким должен быть соответствующий html-код для каждого из них?

Когда "class" или "id" применяется к ним?

Извините, если это покажется элементарным вопросом, но я пытаюсь понять лучшие практики CSS и изучение 960 Grid Square немного затруднено, когда я вижу все эти различные CSS обозначения.

Спасибо за ваше время!