2010-10-08 14 views
5

W poniższym kodzie HTML/CSS, dlaczego kolor linku jest zielony, a nie niebieski, tzn. Dlaczego "zastąpienie" w opisie "#nav", ale "p.description a" nie zastępuje "#nav a"?Dlaczego styl hiperłącza nie kaskadowo w CSS?

alt text

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> 
<title>Insert title here</title> 
<style type="text/css"> 
    #nav { 
     color: black; 
    } 
    #nav a { 
     color: green; 
    } 
    p.description { 
     color:red; 
    } 
    p.description a { 
     color:blue; 
    } 
</style> 
</head> 
<body> 
    <div id="nav"> 
     <p class="description">This is a test and <a href="#">this is a link</a>.</p> 
    </div> 
</body> 
</html> 
+0

Powiązane: http://stackoverflow.com/questions/2809024/points-in-css-specificity –

Odpowiedz

13

Ponieważ selektor ID oraz przełącznik rodzaju jest bardziej szczegółowy niż dwa selektory typu oraz selektora klasy. Zobacz the specification on specificity.

Tak więc kaskada, ale zasady kolejności, w której kaskada się zdarza, nie są tym, za co ją uważaliście.

+4

Wystarczy dodać wartość do Odpowiedź, mógłby być bardziej konkretny, zmieniając jego selektor na '#nav p.description a' –

+0

dzięki Josh, który był poprawką, której szukałem –

-3

Zielony, ponieważ reguła css #nav a {color: green;} określa to.

Aby to zrobić, to niebieski #nav a {color: blue;}

+1

To nie odpowiada na pytanie. Chce wiedzieć, dlaczego zachowuje się w ten sposób, i chce tylko niebieskich linków w opisie. –

Powiązane problemy