Как мне нацелить класс div в форме?

Question

Я пытаюсь нацелиться на what и where, а также search.

Вот мой HTML:

<div class="entry-content">
	<p>&nbsp;</p>
	<div class="entry-content">
		<div class="job_listings" data-location="" data-keywords="" data-show_filters="true" data-show_pagination="false" data-per_page="10" data-orderby="featured" data-order="DESC" data-categories="">
			<form class="job_filters">
				<div class="search_jobs">
					<div class="search_keywords">
						<label for="search_keywords">What?</label><br />
						<input id="search_keywords" name="search_keywords" type="text" value="" placeholder="Chef, Cleaner, Manager" />
					</div>
					<div class="search_location">
						<label for="search_location">Where?</label><br />
						<input id="search_location" name="search_location" type="text" value="" placeholder="London, Berlin, Bristol" />
						<input name="filter_job_type[]" type="submit" value="search" />
					</div>
				</div>
				<div class="showing_jobs"></div>
				<div></div>
				<div>
					<a href="https://adsler.co.uk/post-a-job/">Post A Job</a>
				</div>
			</form>
		</div>
	</div>
	<p><a class="load_more_jobs" style="display: none;" href="#"><strong>Load more listings</strong></a></p>
</div>

Перепробовал все, в том числе.

.entry-content {color: green;}

Интересно, что

. entry-content {background-color: green;} 

работает, но

.entry-content {color:  green! important;} 

ничего не делает.

Answer 1

Вы можете настроить таргетинг по атрибуту и ​​значению:

label[for="search_keywords"]{ /* what label*/
    background-color: red;
}

label[for="search_location"]{ /* where label */
    background-color: blue;
}

input[type="submit"]{ /* search button */
    background-color: green;
}

Атрибут color относится к цвету текста, а не к цвету фона.

Answer 2

Попробуйте атрибут селекторов

[for="search_keywords"],
[for="search_location"],
[name="filter_job_type[]"] {
  color: green;
}

<div class="entry-content">
  <p>&nbsp;</p>
  <div class="entry-content">
    <div class="job_listings" data-location="" data-keywords="" data-show_filters="true" data-show_pagination="false" data-per_page="10" data-orderby="featured" data-order="DESC" data-categories="">
      <form class="job_filters">
        <div class="search_jobs">
          <div class="search_keywords">
            <label for="search_keywords">What?</label><br />
            <input id="search_keywords" name="search_keywords" type="text" value="" placeholder="Chef, Cleaner, Manager" />
          </div>
          <div class="search_location">
            <label for="search_location">Where?</label><br />
            <input id="search_location" name="search_location" type="text" value="" placeholder="London, Berlin, Bristol" />
            <input name="filter_job_type[]" type="submit" value="search" />
          </div>
        </div>
        <div class="showing_jobs"></div>
        <div></div>
        <div>
          <a href="https://adsler.co.uk/post-a-job/">Post A Job</a>
        </div>
      </form>
    </div>
  </div>
  <p><a class="load_more_jobs" style="display: none;" href="#"><strong>Load more listings</strong></a></p>
</div>

Answer 3

Вы можете использовать следующий стиль для нацеливания всех меток внутри entry-content. Это работает, если стиль не переопределяется другими стилями

.entry-content label{
  color:green;
}

Для определенных ярлыков вы можете использовать,

.search_keywords label{
  color:green;
}

.search_location label{
  color:green;
}

UPDATE

Для полей ввода, таких как chef,manager и т. Д., Вы можете использовать

.search_keywords input{
  //Your style here
}

или поскольку у вас есть идентификатор для поля ввода, используйте

#search_keywords{
  //Style here
}

и для кнопки отправки search вы можете использовать следующее,

.search_location input[type=submit]{
  //style here
}