html - 如何定位表单文本标签？

Question

我正在尝试使用 css 定位 wpcf7 中的文本标签。 我已经设法使用 wpcf7-form-control 定位其他元素，但似乎无法定位文本。

HTML:

<div class="entry-content">
<div role="form" 
class="wpcf7" id="wpcf7- 
f337-p187-o1" lang="en-US" 
dir="ltr">
<div class="screen-reader. 
response"></div>
<form 
action="/contact/#wpcf7- 
f337-p187-o1" method="post" 
class="wpcf7-form" 
novalidate="novalidate">
<div style="display: none;">
<input type="hidden" 
name="_wpcf7" value="337" />
<input type="hidden" 
name="_wpcf7_version" 
value="5.1.3" />
<input type="hidden" 
name="_wpcf7_locale" 
value="en_US" />
<input type="hidden" 
name="_wpcf7_unit_tag" 
value="wpcf7-f337-p187-o1" 
/><input type="hidden" 
name="_wpcf7_container_post" 
value="187" />
</div>
<p><label> Your Name 
(required)<br />
<span class="wpcf7-form. 
control-wrap your-name">. 
<input type="text" 
name="your-name" value="" 
size="40" class="wpcf7-form. 
control wpcf7-text wpcf7- 
validates-as-required" aria- 
required="true" aria- 
invalid="false" /></span> 
</label></p>
<p><label> Your Email 
(required)<br />

CSS:

@media (min-width: 768px) 
{.wpcf7-form-control.wpcf7- 
text{color: red;}}

和

@media (min-width: 768px) 
{label.wpcf7-form-control {color: 
red;}}

没有。

Answer 1

因为没有标签名称为 .wpcf7-form-control 的类，它是他的父类，所以您将其定位错误。

试试这个

 .wpcf7-form  label{
      color: red !important;
    }