Sélecteur de pseudo-classe dynamique
Le sélecteur de pseudo-classe dynamique est un type de sélecteur de pseudo-classe. Sa syntaxe est la suivante :
E: pseudo-class {property:value}où E est un élément en HTML, la pseudo-classe est le nom du sélecteur de pseudo-classe CSS. , et la propriété est l'attribut CSS, la valeur est la valeur de l'attribut CSS.
Les pseudo-classes dynamiques n'existent pas en HTML et ne peuvent être reflétées que lorsque les utilisateurs interagissent avec le site Web. Il existe deux types de pseudo-classes dynamiques. La première est la pseudo-classe d'ancrage souvent observée dans les liens, et l'autre est la pseudo-classe de comportement de l'utilisateur.
La syntaxe détaillée qu'il prend en charge est la suivante?:
En plus de E:active et E:focus qui nécessitent IE8 et supérieur, d'autres pseudo-dynamiques options de classe Tous les navigateurs le prennent en charge.
Utilisez le code suivant pour tester le sélecteur de pseudo-classe dynamique afin d'obtenir l'effet du bouton lorsqu'il est sélectionné et cliqué?:
<!DOCTYPE HTML>
<HTML lang="en-US">
<HEAD>
<META charset="UTF-8">
<TITLE>使用動(dòng)態(tài)偽類選擇器美化按鈕</TITLE>
<STYLE type="text/css">
.download-info {
text-align: center;
}
/*默認(rèn)狀態(tài)下的按鈕效果*/
.btn {
background-color: #0074cc;
*background-color: #0055cc;
/*CSS漸變制作背景圖片*/
background-image: -ms-linear-gradient(top, #0088cc, #0055cc);
background-image: -webkit-gradient(linear, 0, 0, 0 100%, from(#0088cc), to(#0055cc));
background-image: -webkit-linear-gradient(top, #0088cc, #0055cc);
background-image: -o-linear-gradient(top, #0088cc, #0055cc);
background-image: -moz-linear-gradient(top, #0088cc, #0055cc);
background-image: linear-gradient(top, #0088cc, #0055cc);
background-repeat: repeat-x;
display: inline-block;
*display: inline;
border: 1px solid #cccccc;
*border: 0;
border-color: #ccc;
/*CSS3的色彩模塊*/
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
border-radius: 6px;
color: #ffffff;
cursor: pointer;
font-size: 20px;
font-weight: normal;
filter: progid:dximagetransform.microsoft.gradient(startColorstr='#0088cc', endColorstr='#0055cc', GradientType=0);
filter: progid:dximagetransform.microsoft.gradient(enabled=false);
line-height: normal;
padding: 14px, 24px;
/*CSS3文字陰影特性*/
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
text-decoration: none;
vertical-align: middle;
*zoom: 1;
}
/*懸浮狀態(tài)下按鈕效果*/
.btn:hover {
background-position: 0 -15px;
background-color: #0055cc;
*background-color: #004ab3;
color: #ffffff;
text-shadow: 0, -1px 0 rgba(0, 0, 0, 0.25);
/*CSS3動(dòng)畫效果*/
-webkit-transition: background-position 0.1s linear;
-moz-transition: background-position 0.1s lineaar;
-ms-transition: background-position 0.1s linear;
-0-transition: background-position 0.1s linear;
transition: background-position 0.1s linear;
}
/*點(diǎn)擊時(shí)按鈕效果*/
.btn:active {
background-color: #0055cc;
*background-color: #004ab3;
background-color: #004099 ;
background-image: none;
outline: 0;
/*CSS3盒子陰影特性*/
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.15);
color: rgba(255, 255, 255, 0.75);
}
/*獲得焦點(diǎn)按鈕效果*/
.btn: focus {
outline: thin dotted #333;
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px;
}
</STYLE>
</HEAD>
<BODY>
<div class="download-info">
<a hred="#" class="btn">View project on GitHub</a>
</div>
</BODY>
</HTML>L'effet d'affichage est le suivant (en utilisant le .btn style par défaut)?:
L'effet lorsque le curseur est placé sur le bouton (le style lors de l'utilisation de .btn:hover) :
L'effet au clic sur le bouton (en utilisant le style correspondant à .btn:active) :
Le principe d'amour et de haine (LoVe/HAte)?:
Le paramétrage de la pseudo-classe d'ancrage doit respecter un "principe amour-haine" LoVe/HAte, c'est-à-dire lien-visité-survol-actif (. L-V-H-A), et dans IE6, IE7, IE8 a :hover, a:active, a:visited ne calculent pas leur spécificité selon l'algorithme décrit dans la spécification
Au lieu de cela, ils décident quelle déclaration dans la règle. défini pour être utilisé en fonction de l’état réel du lien.
La pseudo-classe :visited :hover :active de l'élément A dans IE6 IE7(Q) IE8(Q) ne calcule pas la pertinence selon l'algorithme requis par la spécification
