: pierwsze dziecko nie działa zgodnie z oczekiwaniami

Question 1

Próbuję wybrać pierwszą h1wewnątrz a divz klasą o nazwie detail_container. Działa, jeśli h1jest pierwszym elementem w tym div, ale jeśli pojawi się później ul, nie zadział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 h1bez względu na to, gdzie się w tym znajduje div. Jak mogę to zrobić?

Question 2

Te h1:first-childśrodki wybierające

Wybierz pierwsze dziecko swojego rodzica
wtedy i tylko wtedy, gdy jest h1elementem.

:first-childPojemnika tu jest ul, i jako takie mogą nie spełniaćh1:first-child .

:first-of-typeDla twojego przypadku są CSS3 :

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

Ale z problemami ze zgodnością przeglądarek i innymi rzeczami, lepiej dać pierwszą h1klasę, a następnie skierować ją na tę klasę:

.detail_container h1.first
{
    color: blue;
}

Question 3

:first-childwybiera pierwszy h1 wtedy i tylko wtedy, gdy jest pierwszym dzieckiem swojego elementu nadrzędnego. W twoim przykładzie uljest pierwszym dzieckiemdiv .

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

:firstSelektor jQuery daje Ci to, czego szukasz. Możesz to zrobić:

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

Question 4

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ć dla nich klasę, jak powiedział BoltClock.

Question 5

możesz także użyć

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

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

Question 6

Możesz zawinąć swoje h1tagi w inny, diva pierwszym z nich będzie first-child. To divnawet nie wymaga stylów. To tylko sposób na oddzielenie tych dzieci.

<div class="h1-holder">
    <h1>Title 1</h1>
    <h1>Title 2</h1>
</div>

Question 7

Element nie może bezpośrednio dziedziczyć po <body>tagu. Możesz spróbować umieścić go w <dir style="padding-left:0px;"></dir>tagu.

Answer 1

99

Próbuję wybrać pierwszą h1wewnątrz a divz klasą o nazwie detail_container. Działa, jeśli h1jest pierwszym elementem w tym div, ale jeśli pojawi się później ul, nie zadział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 h1bez względu na to, gdzie się w tym znajduje div. Jak mogę to zrobić?

css css-selectors The Muffin Man
źródło

1

Cokolwiek CSS nie może zrobić, JavaScript może.

JCOC611

11

To jest coś, co możesz zrobić z CSS3 :)

BoltClock

Answer 2

1

Cokolwiek CSS nie może zrobić, JavaScript może.

JCOC611

Answer 3

11

To jest coś, co możesz zrobić z CSS3 :)

BoltClock

Answer 4

222

Te h1:first-childśrodki wybierające

Wybierz pierwsze dziecko swojego rodzica
wtedy i tylko wtedy, gdy jest h1elementem.

:first-childPojemnika tu jest ul, i jako takie mogą nie spełniaćh1:first-child .

:first-of-typeDla twojego przypadku są CSS3 :

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

Ale z problemami ze zgodnością przeglądarek i innymi rzeczami, lepiej dać pierwszą h1klasę, a następnie skierować ją na tę klasę:

.detail_container h1.first
{
    color: blue;
}

BoltClock
źródło

2

Teraz rozumiem, chociaż myślę, że powinni byli wdrożyć obie wersje, kiedy tworzyli standard.

The Muffin Man

Nie działa w wersji IE9. Jest tam napisane h1: nieznane w narzędziu deweloperskim

Cine

11

Lista kompatybilności z :first-of-typeselektora.

Jess Telford

4

Nowszy lista kompatybilności z :first-of-type. Stary link jest nieprawidłowy.

BadHorsie

Moim zdaniem ten termin :first-childnie jest jasny do zrozumienia, ponieważ definiujesz element jako, powiedzmy h1, selektor CSS , a następnie myślisz „weź pierwsze dziecko” ze wszystkich na wybranym poziomie DOM. Tyle razy źle to wykorzystałem ... Musimy przyzwyczaić się do :first-of-typeselektora i pomyśleć o pierwszym dziecku tego typu.

Kai Noack

Answer 5

2

Teraz rozumiem, chociaż myślę, że powinni byli wdrożyć obie wersje, kiedy tworzyli standard.

The Muffin Man

Answer 6

Nie działa w wersji IE9. Jest tam napisane h1: nieznane w narzędziu deweloperskim

Cine

Answer 7

11

Lista kompatybilności z :first-of-typeselektora.

Jess Telford

Answer 8

4

Nowszy lista kompatybilności z :first-of-type. Stary link jest nieprawidłowy.

BadHorsie

Answer 9

Moim zdaniem ten termin :first-childnie jest jasny do zrozumienia, ponieważ definiujesz element jako, powiedzmy h1, selektor CSS , a następnie myślisz „weź pierwsze dziecko” ze wszystkich na wybranym poziomie DOM. Tyle razy źle to wykorzystałem ... Musimy przyzwyczaić się do :first-of-typeselektora i pomyśleć o pierwszym dziecku tego typu.

Kai Noack

Answer 10

15

:first-childwybiera pierwszy h1 wtedy i tylko wtedy, gdy jest pierwszym dzieckiem swojego elementu nadrzędnego. W twoim przykładzie uljest pierwszym dzieckiemdiv .

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

:firstSelektor jQuery daje Ci to, czego szukasz. Możesz to zrobić:

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

Rob Sobers
źródło

Twoje prawo jest mylące, głównie byłem zdezorientowany, ponieważ wcześniej używałem jQuery do tego.

The Muffin Man

Answer 11

Twoje prawo jest mylące, głównie byłem zdezorientowany, ponieważ wcześniej używałem jQuery do tego.

The Muffin Man

Answer 12

9

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ć dla nich klasę, jak powiedział BoltClock.

Grekz
źródło

Nie powinieneś mieć żadnych problemów. Tutaj ref w3.org/TR/CSS2/selector.html#child-selectors

Grekz

Answer 13

Nie powinieneś mieć żadnych problemów. Tutaj ref w3.org/TR/CSS2/selector.html#child-selectors

Grekz

Answer 14

6

możesz także użyć

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

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

Fabrice
źródło

Answer 15

Możesz zawinąć swoje h1tagi w inny, diva pierwszym z nich będzie first-child. To divnawet nie wymaga stylów. To tylko sposób na oddzielenie tych dzieci.

<div class="h1-holder">
    <h1>Title 1</h1>
    <h1>Title 2</h1>
</div>

Answer 16

0

Element nie może bezpośrednio dziedziczyć po <body>tagu. Możesz spróbować umieścić go w <dir style="padding-left:0px;"></dir>tagu.

Edmond Chow
źródło

: pierwsze dziecko nie działa zgodnie z oczekiwaniami

Odpowiedzi: