Pourquoi "! Important" ne remplace-t-il pas ": première ligne"?

J'essaie de faire le tutoriel dans le chapitre 6 de la deuxième édition de "CSS: The Missing Manual", et j'ai rencontré un problème que j'essaie de comprendre.Pourquoi "! Important" ne remplace-t-il pas ": première ligne"?

J'ai un style qui ressemble à ceci:

#main p:first-line { 
    color: #999999; 
    font-weight: bold; 
}

Plus tard, j'ai un autre style qui ressemble à ceci:

#main p.byline { 
    color: #00994D !important; 
    font-size: 1.6em; 
    margin: 5px 0 25px 50px; 
}

Je suis confus parce que le second ne remplacera pas la couleur choix dans le premier malgré le fait que le second a "! important" en elle. J'ai mis les deux classes dans un calculateur de spécificité en ligne, et le second sort plus spécifique, donc je suis doublement confus. Par ailleurs, l'inclusion de "! Important" est la solution suggérée dans l'errata pour le livre. Bizarre que ça ne marche toujours pas!

est ici le code de la page entière:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<title>CSS Typography</title> 
<style type="text/css"> 
    html, body, h1, h2, h3, h4, h5, h6, p, ol, ul, li, pre, code, address, variable, form, fieldset, blockquote { 
    padding: 0; 
    margin: 0; 
    font-size: 100%; 
    font-weight: normal; 
    } 
    table { border-collapse: collapse; border-spacing: 0; } 
    td, th, caption { font-weight: normal; text-align: left; } 
    img, fieldset { border: 0; } 
    ol { padding-left: 1.4em; list-style: decimal; } 
    ul { padding-left: 1.4em; list-style:square; } 
    q:before, q:after { content:''; } 

body { 
    color: #002D4B; 
    font-family: Arial, Helvetica, sans-serif; 
    font-size: 62.5% 
} 

#main h1 { 
    color: #F60; 
    font-family: "Arial Black", Arial, Helvetica, sans-serif; 
    font-size: 4em; 
} 
#main h2 { 
    font: bold 3.5em "Hoefler Text", Garamond, Times, serif; 
    border-bottom: 1px solid #002D4B; 
    margin-top: 25px; 
} 
#main h3 { 
    color: #F60; 
    font-size: 1.9em; 
    font-weight: bold; 
    text-transform: uppercase; 
    margin-top: 25px; 
    margin-bottom: 10px; 
} 
#main p { 
    font-size: 1.5em; 
    line-height: 150%; 
    margin-left: 150px; 
    margin-right: 50px; 
    margin-bottom: 10px; 
} 
#main p:first-line { 
    color: #999999; 
    font-weight: bold; 
} 
#main ul { 
    margin: 50px 0 25px 50px; 
    width: 150px; 
    float: right; 
} 
#main li { 
    color: #207EBF; 
    font-size: 1.5em; 
    margin-bottom: 7px; 
} 
#main p.byline { 
    color: #00994D !important; 
    font-size: 1.6em; 
    margin: 5px 0 25px 50px; 
} 

#main .byline strong { color: #207EBF; text-transform: uppercase; margin-left: 5px; 
} 

</style> 
</head> 

<body> 
<div id="main"> 
<h1><strong>CSS</strong> The Missing Manual</h1> 
<h2>Exploring Typographic Possibilities</h2> 
<p class="byline">november 30 <strong>Rod Dibble</strong></p> 
<ul> 
    <li>Lorem Ipsum</li> 
    <li>Reprehenderit qui in ea</li> 
    <li>Lorem Ipsum</li> 
    <li>Reprehenderit qui in ea</li> 
    <li>Lorem Ipsum</li> 
    <li>Reprehenderit qui in ea</li> 
</ul> 
<h3>Esse quam nulla</h3> 
<p>Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur? Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p> 
<h3>Quis autem vel eum</h3> 
<p>Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur? Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p> 
</div> 
</body> 
</html>

Voici le code ci-dessus sur JSBin: http://jsbin.com/unexe3

Source

2010-02-12 bazzlevi

D'ailleurs, je l'ai aussi tapé le second sélecteur comme: #main p. byline { couleur: # 00994D! important; taille de police: 1.6em; marge: 5px 0 25px 50px; (Ajouter un espace avant ".byline") et cela ne semble pas faire la différence. – bazzlevi

La propriété! Important est étant appliquée à .byline, mais vous n'avez pas assez de contenu dans le paragraphe pour le réaliser (il n'est pas appliqué à la première ligne). Le sélecteur #main p:first-line est plus spécifique à la première ligne de l'élément que #main p.byline. Vous pouvez le réparer facilement en changeant le sélecteur de première ligne pour ne l'appliquer qu'aux éléments de paragraphe qui suivent les éléments h3.

#main h3+p:first-line 
{ 
    color: #999999; 
    font-weight: bold; 
}

En outre, la calculatrice de spécificité était probablement pas tout à fait exact, car :first-line est pas un élément réel, mais un pseudo-élément. Smashing Magazine has a nice article on Advanced CSS Selectors.

Source

2010-03-04 03:41:00 HaleFx

J'ai essayé votre code et il fonctionne pour moi (a la couleur verte à droite) - - en utilisant Firefox. Quel navigateur utilisez-vous?

Source

2010-02-12 21:22:30 ash

Je l'ai essayé tout à l'heure dans Firefox 3.6 sous Mac OS X Snow Leopard. Je l'ai également essayé dans Safari 4.0.4 ainsi que dans Google Chrome 5.0.307.7 beta pour Mac. La partie qui devrait être verte apparaît grise pour moi. – bazzlevi

Vraiment étrange, je ne peux pas reproduire cela (j'utilise Windows 7, mais cela devrait être sans conséquence). – ash

N'a pas fonctionné pour moi: Firefox 3.6, Vista. – nickf

La raison pour laquelle la couleur n'est pas appliquée est que :first-line crée un "pseudo-élément" autour de la première ligne d'un paragraphe. Ainsi, alors que le code ressemble à ceci:

<p class="byline"> 
    november 30 <strong>Rod Dibble</strong> 
</p>

Le navigateur finit par interpréter comme ceci:

<p class="byline"> 
    <p:first-line> 
    november 30 <strong>Rod Dibble</strong> 
    </p:first-line> 
</p>

Même si vous avez déclaré la propriété color aussi importante, le sélecteur CSS, il est déclaré sous (#main p.byline) n'est pas aussi spécifique au pseudo-élément de première ligne que celui qui est déclaré avec le sélecteur #main p:first-line.

W3 docs aller dans beaucoup plus de détails: The :first-line pseudo-selector

Source

2010-12-30 17:01:15

Pourquoi "! Important" ne remplace-t-il pas ": première ligne"?

Répondre

Questions connexes