Que sont les sélecteurs CSS3 : lecture-écriture et : lecture seule ? Comment utiliser ?

Le contenu de cet article est de vous présenter quels sont les sélecteurs css3 : read-write et :read-only ? Comment l'utiliser, faites savoir à tout le monde ce que sont le sélecteur :read-write et :read-only de CSS3, ce qu'ils font et comment les utiliser. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il vous sera utile.

css3 :read-write

:read-write est un sélecteur de pseudo-classe en CSS, qui est utilisé pour faire correspondre les éléments modifiables par l'utilisateur, c'est-à-dire lisibles et des éléments inscriptibles. Les

Les éléments appartenant à la catégorie éditable comprennent :

1. Les éléments . Cela signifie qu'ils n'ont ni l'attribut readonly ni l'attribut désactivé.

2. Un élément qui n'est ni en lecture seule ni désactivé (similaire à l'entrée).

3. Tout autre élément qui n'est pas ou , mais dont l'attribut contenteditable est défini.

Remarque : Actuellement, dans la plupart des navigateurs, le sélecteur :read-write ne peut être utilisé que pour définir les éléments d'entrée et de zone de texte.

css3 :read-only

:read-only est également un sélecteur de pseudo-classe en CSS, correspondant à tout ce qui ne correspond pas à l'élément sélecteur :read-write .

En d'autres termes, le sélecteur de pseudo-classe :read-only correspond aux éléments qui ne sont pas modifiables par l'utilisateur, c'est-à-dire qu'il correspond à tout élément qui n'est pas modifiable ci-dessus ↑. Par exemple : des éléments avec des attributs tels que lecture seule ou ensemble désactivé.

Voici des exemples d'éléments qui peuvent être mis en correspondance à l'aide de :read-write :

< input  type = “text” >
< input  type = “number” >
< textarea  name = “nm”  id = “id”  cols = “30”  rows = “10” >  </ textarea >
< div  class = “random”  contenteditable >  </ div >

Les éléments suivants sont des éléments qui ne peuvent pas être mis en correspondance à l'aide de :read-write, c'est-à-dire qu'ils peuvent être mis en correspondance en utilisant :read-only Exemple d'élément :

< input  type = “text”  disabled >
< input  type = “number”  disabled >
< input  type = “number”  readonly >
< textarea  name = “nm”  id = “id”  cols = “30”  rows = “10”  readonly >  </ textarea >
< div  class = “random” >  </ div >  <！ - 无法使用contenteditable编辑的常规元素 - >

Bien qu'il s'agisse du comportement recommandé par la spécification, le comportement du navigateur semble varier : ce qui peut être considéré comme lu et écrit dans un navigateur ne l'est pas considéré comme lisible ou écrit dans un autre navigateur sera considéré comme en lecture seule, donc le style :read-write que nous appliquons peut ne pas fonctionner avec certains navigateurs.

Tout comme les autres pseudo-sélecteurs, le sélecteur :read-write et le sélecteur :read-only peuvent être chaînés avec d'autres sélecteurs, tels que :hover et le pseudo-élément ::after.

Par exemple, :read-write+:focus stylisera la zone de texte modifiable :

textarea:read-write:focus {
    box-shadow: 0 0 2px 1px rgba(0,0,0,0.2);
}

textarea:read-write:before {
    content: "Type here...";
    color: #aaa;
}

Par exemple, :read-only + :hover stylisera le div sur la page (régulier ) Styles fournis :

div:read-only:hover {
    background-color: #eee;
}

div:read-only:before {
    content: "?";
    color: deepPink;
}

Prise en charge du navigateur

Le numéro dans le tableau indique le premier navigateur qui prend en charge l'attribut Version nombre.

Dans le navigateur Firefox, utilisez le préfixe : -moz-read-write, -moz-read-only ; et le sélecteur de lecture-écriture et le sélecteur de lecture seule ne sont pas pris en charge sur Internet Explorer et Android.

Résumé : Ce qui précède représente l'intégralité du contenu de cet article, j'espère qu'il sera utile à l'étude de chacun. Tutoriels vidéo associés recommandés : Tutoriel CSS3 !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!