web-dev-qa-db-fra.com

Comment utiliser le sélecteur css pur pour sélectionner un élément caché

<td class="col" style="display:none">AAA
      <span prop="1" class=" clear-icon " style=""></span>
</td>

Je veux utiliser des CSS purs pour masquer le texte "AAA" afin d'afficher span btn . Y a-t-il un moyen de le faire en CSS pur?

csscss3css-selectors
13
9blue

Si votre conception n'est pas vraiment réactive, vous pouvez simplement définir une taille de police fixe pour le span intérieur, je pense que nous avons une solution propre comme celle-ci. L'idée est de définir font-size du td sur 0, le nœud de texte sera complètement masqué:

.col[style*="display:none"] {
  display:table-cell!important;
  font-size:0;
}
.col > span {
  font-size:20px;
}

Démo.

25
King King

Vous pouvez utiliser la propriété visibility mais cela réservera l'espace pour le texte "AAA":

.col {    
    visibility:hidden;
}

.clear-icon {
    visibility:visible;
}

De plus, si vous ne pouvez pas supprimer display:block !important; de votre balise td, ajoutez simplement la règle !important en CSS.

.col {
    display:block !important;
    visibility:hidden;
}
1
Artem Petrosian

voir ce violon

<table>
    <td class="col">AAA <span>Show Me</span>
    </td>
</table

.col {
    visibility:hidden;
}
.col span {
    visibility:visible;
}
0
Chris M

http://jsfiddle.net/vLNEp/4/

<table><tr><td class="col"><span class="hidden">AAA</span>
      <span prop="1" class="clear-icon"></span>
</td></tr></table>

.col .hidden {position:absolute;top: -9999px; left: -9999px;}
0
JohanVdR