Что означает «div» в моем коде css?

Question

Долгое время у меня была проблема с отображением кнопки справа от поля ввода. На некоторых компьютерах он работал, но на других компьютерах и в разных разрешениях он скрывался под полем ввода, поэтому пользователь даже не мог его увидеть.

Мой код был что-то вроде (с помощью simple_form в Rails):

<%= simple_form_for @review, :url => search_index_path, :method => :post, :html => {:class => 'form-inline'} do |f| %> 

и т.д ... и т.д ...

С помощью Stackoverflow мой CSS много раз менялись - целыми днями на него - и, наконец, закончилось так, что отлично работает:

.form-inline div { 
display: inline-block; 
margin-top: 5px; 
} 

Мне просто интересно, что это за «div»? Например,

.form-inline { 
display: inline-block; 
margin-top: 5px; 
} 

не работает. Я думал, что «div» - это то, что вы помещаете в код разметки, например <div form-inline>whatever</div>, а не в css. Просто любопытно ...

Answer 1

Этотdiv означает все элементы div в ваших элементах с классом .form-inline. Им не нужно быть детьми .form-inline. Им просто нужно быть в этом.

Возьмите это в качестве примера:

<form class="form-inline"> 
    <div>a</div> 
    <div>b</div> 
    <p>Some text <div>d</div></p> 
</form> 
<div>c</div> 

div S "A", "B" и "D" будет отформатированный. div «c» не будет.

Answer 2

Он присваивает этот набор правил для любой DIV внутри.form-inline элемент, а не сам .form-inline.

Answer 3

Div в вашем коде является частью селектора в CSS.

Проще говоря, это означало бы выбрать любой элемент/тег, который имеет класс .form-inline, и выбрать все div, которые являются декандантами этого элемента, и применять следующие правила.

display: inline-block; 
margin-top: 5px; 

В вашем случае, если вы используете Потомок Selector

Descendant Selector

Пространство между двумя простой селектор называется комбинаторный.

Selector Reference

Answer 4

Есть много CSS селекторов, которые вы можете использовать. Вы можете найти их все здесь:

http://www.w3.org/TR/CSS2/selector.html

Answer 5

.form-inline div селектор означает применить это правило к каждому div, который является потомком любого элемента с классом form-inline.

Так, например:

<my-elem class="form-inline"> 
    <another-type /> 
    <div>I'll get this CSS rule</div> 
    <something-else> 
    <div>I'll get this CSS rule too</div> 
    </something-else> 
</my-elem> 

названия HTML элементов в CSS не приставкой, как, например, классы (с .dot) или идентификаторы (с #hash).