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

您可以使用以下样式来定位entry-content中的所有标签。除非该样式未被其他样式覆盖，否则此方法将起作用

.entry-content label{
  color:green;
}

对于特定标签，您可以使用

.search_keywords label{
  color:green;
}

.search_location label{
  color:green;
}

更新

对于chef,manager等输入字段，您可以使用

.search_keywords input{
  //Your style here
}

或者由于您具有输入字段的ID，请使用

#search_keywords{
  //Style here
}

对于提交按钮search，您可以使用以下内容，

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

Answer 2

您可以按属性和值作为目标

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;
}

颜色属性是指文本颜色，而不是背景色。

Answer 3

尝试attribute selectors

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

如何在表单中定位div类？

3 个答案: