'erforderlich' CSS-Selektor Syntax

Question

fand ich folgende CSS in https://angular.io/docs/ts/latest/guide/forms.html

.ng-valid[required], .ng-valid.required { 
    border-left: 5px solid #42A948; /* green */ 
} 
.ng-invalid:not(form) { 
    border-left: 5px solid #a94442; /* red */ 
} 

ich nicht .ng-valid[required] Syntax zuvor gesehen haben. Ich denke, .ng-valid ist eine Klasse. Ist [required] eine neue CSS-Syntax?

Answer 1

Mit der CSS attribute selector*[required] können Sie Elemente mit dem Attribut required formatieren. Die Syntax ist nicht neu. Siehe das folgende Beispiel:

input[required] { 
 
    border:1px solid red; 
 
}

<input type="text" required/> 
 
<input type="text"/>

Diese oft in <form> s verwendet wird, einige Elemente wie <input> zu definieren, je nach Bedarf. Mit dem CSS-Attributselektor *[required] können Sie diese erforderlichen Elemente formatieren.

---

Sie können auch die :required pseudo-Klasse verwenden, um die erforderlichen Elemente zu formatieren:

input:required { 
 
    border:1px solid red; 
 
}

<input type="text" required/> 
 
<input type="text"/>

Die :required CSS Pseudo-Klasse steht für ein beliebiges <input> Element, das die hat required Attribut festgelegt. Dadurch können Formulare leicht angeben, welche Felder gültige Daten haben müssen, bevor das Formular gesendet werden kann.
Quelle:https://developer.mozilla.org/en-US/docs/Web/CSS/:required