: pierwsze-dziecko nie pracuje zgodnie z oczekiwaniami

Próbuję wybrać pierwszą h1 wewnątrz div Z klasą o nazwie detail_container. To działa, Jeśli h1 jest pierwszym elementem w tym div, ale jeśli nastąpi po tym ul to nie będzie działać.

<style type="text/css">
.detail_container h1:first-child
{
color:blue;
} 
</style>
</head>
<body>
<div class="detail_container">
    <ul>
    <li></li>
    <li></li>
    </ul>
    <h1>First H1</h1>
    <h1>Second H1</h1>
</div>
</body>
</html>

Miałem wrażenie, że CSS, który mam, wybierze pierwszy h1 bez względu na to, gdzie jest w tym div. Jak mogę to zrobić?

Author: Jeremy W, 2010-12-22
Source

5 answers

Selektor h1:first-child oznacza

Wybierz pierwsze dziecko rodzica
wtedy i tylko wtedy, gdy jest elementem h1.

:first-child pojemnika tutaj jest ul i jako taki nie może zaspokoić h1:first-child.

Jest CSS3 :first-of-type w Twoim przypadku: 

.detail_container h1:first-of-type
{
    color: blue;
}

Ale z problemami z kompatybilnością przeglądarki i tym podobne, lepiej dać pierwszą h1 klasę, A następnie skierować ją do tej klasy: 

.detail_container h1.first
{
    color: blue;
}
 164
Author: BoltClock,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2011-11-01 20:49:09

:first-child wybiera pierwszą h1 wtedy i tylko wtedy, gdy jest pierwszym potomkiem elementu nadrzędnego. W twoim przykładzie ul jest pierwszym dzieckiem div.

Nazwa pseudoklasy jest nieco myląca, ale jest wyjaśniona dość jasno tutaj W spec.

Selektor JQuery daje Ci to, czego szukasz. Możesz to zrobić:

$('.detail_container h1:first').css("color", "blue");

 10
Author: Rob Sobers,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2010-12-22 02:41:12

W tym konkretnym przypadku możesz użyć: 

.detail_container > ul + h1{ 
    color: blue; 
}

Ale jeśli potrzebujesz tego samego selektora w wielu przypadkach, powinieneś mieć klasę dla tych, jak powiedział BoltClock.

 8
Author: Grekz,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2010-12-22 23:19:23

Możesz również użyć 

.detail_container h1:nth-of-type(1)

Zmieniając liczbę 1 o dowolną inną liczbę można wybrać dowolną inną pozycję h1.

 3
Author: Fabrice,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-03-14 08:57:44

Możesz zawinąć swoje h1 tagi w inny div, a wtedy pierwszy będzie first-child. To div nie potrzebuje nawet styli. To tylko sposób na segregację tych dzieci.

<div class="h1-holder">
    <h1>Title 1</h1>
    <h1>Title 2</h1>
</div>
 1
Author: GhostToast,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-05-09 16:47:41