如何为出现两次的嵌套属性编写CSS选择器？

问题描述

如何编写CSS选择器以仅检索错误消息“输入密码”？

<div class="input-label-element">
    <input type="text" class="Input--regular is-error" minLength="0" maxLength="120" name="username" errorMessage="Enter username" value>
    <div class="Input-regular Input--help-regular Input--message">Enter username</div>
<div class="input-label-element">
    <input type="text" class="Input--regular is-error" minLength="0" maxLength="120" name="username" errorMessage="Enter password" value>
    <div class="Input-regular Input--help-regular Input--message">Enter password</div>

解决方法

您可以使用errorMessage属性将其定位：

[errorMessage="Enter Password"] {
    /* style */
}

,

您可以使用CSS attribute selectors：

input[errorMessage="Enter password"] {
  border: solid 2px red;
}

<div class="input-label-element">
  <input type="text" class="Input--regular is-error" minLength="0" maxLength="120" name="username" errorMessage="Enter username" value>
  <div class="Input-regular Input--help-regular Input--message">Enter username</div>
  <div class="input-label-element">
    <input type="text" class="Input--regular is-error" minLength="0" maxLength="120" name="username" errorMessage="Enter password" value>
    <div class="Input-regular Input--help-regular Input--message">Enter password</div>