Czy jest jakiś sposób na określenie skrótu CSS dla "wszystkich elementów z wyjątkiem pierwszego / ostatniego"?

Bardzo często naturalne jest, że trzeba określić styl CSS dla wszystkich elementów z wyjątkiem pierwszego (lub ostatniego). Na przykład podczas stylizacji akapitów należy dodać dolny margines do każdego elementu z wyjątkiem ostatniego (lub podobnie górny margines do każdego elementu z wyjątkiem pierwszego).

Czy Jest jakiś sposób, aby to zrobić to :

  • bardziej zwięzłe niż definiowanie p {...} a potem p:first-child {...}?
  • prostsze i bardziej intuicyjne niż p:nth-child(-n+1)?

Jeśli nie ma, zrób wiesz o próbach dodania?

Author: BoltClock, 2012-04-05
Source

4 answers

Dla wszystkich elementów p z wyjątkiem pierwszego potomka, użyj jednego z nich (drugi jest lepiej wspierany): 

p:not(:first-child)
p:first-child ~ p

Dla wszystkich p elementów z wyjątkiem ostatniego potomka: 

p:not(:last-child)

Dla wszystkich p elementów z wyjątkiem pierwszego i ostatniego potomka: 

p:not(:first-child):not(:last-child)

Jak zwykle, CSS3 :not() i :last-child nie są obsługiwane do IE9+ i stosunkowo nowych wersji innych przeglądarek. Nie osiągniesz zbyt daleko jeśli chodzi o obsługę przeglądarek (IE8 i starszych), chyba że dodasz klasy do Twoje pierwsze i ostatnie dzieci, używając JavaScript lub w inny sposób.

Pamiętaj, że marginesy pionowe zwijają się między akapitami w przepływie a ich przodkami, więc jeśli nie chcesz zerować marginesów elementu kontenera również dla tych akapitów, nie powinieneś dokładnie zerować marginesów pierwszego i ostatniego p elementów. Oto skrzypce do zilustrowania.

 79
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
2012-04-12 20:38:20

Możesz to zrobić: 

p:not(:first-child) {...}

Ale tylko najnowsze przeglądarki obsługują klasę :not psuedo.

Poza tym, nie. Najlepszą opcją jest określenie stylu dla wszystkich, a następnie nadpisanie go dla pierwszego/ostatniego.
 3
Author: Niet the Dark Absol,
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-04-05 17:42:38

Jeśli obsługa IE7-8 nie jest potrzebna możesz użyć :not() selektor CSS .

Ale jeśli potrzebujesz wsparcia IE7+, co może nadal mieć miejsce, istnieje mała sztuczka, której możesz użyć i zwykle prowadzi cię dość daleko. Mniej znanym faktem jest to, że selektor :first-child psuedo faktycznie działa w IE7+ (nie :last-child choć), jak są niektóre inne selektory css i to sprawia, że rzeczy takie jak dodawanie pionowych marginesów w układzie poziomo pływających.

Wyobraź sobie to html: 

<ul>
    <li>Item #1</li>
    <li>Item #2</li>
    <li>Item #3</li>
    <li>Item #4</li>
</ul>

I to jako jakiś CSS: 

/* General reset */
ul, li { list-type: none; margin: 0; padding: 0; }
/* Make horizontal */
ul > li { float: left; }

Więc teraz wszystkie elementy listy są poziomo obok siebie, a teraz chcemy dodać margines między wszystkimi elementami, ale nie po prawej lub lewej stronie, możemy to zrobić w css: 

/* General reset */
ul, li { list-type: none; margin: 0; padding: 0; }
/* Make horizontal */
ul > li { float: left; margin-left: 10px; }
ul > li:first-child { margin-left: 0; }

To zwykle obejmuje 95% przypadków, w których chcę czegoś wyjątkowego, następnie reszta 'zapomnianych' selektorów obejmuje kolejne kilka procent, po tym trzeba dodać kilka klas, które zwykle nie są wąskim gardłem i tak w backend strony.

 3
Author: sg3s,
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-04-12 20:38:03

Proponuję użyć first-of-type: 

p:not(:first-of-type) { ... }

Obsługa przeglądarki (caniuse)

 2
Author: David Morales,
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
2017-12-27 10:15:40