CSS: not (: last-child): after selector
Mam listę elementów, które są stylizowane tak:
ul {
list-style-type: none;
text-align: center;
}
li {
display: inline;
}
li:not(:last-child):after {
content:' |';
}<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
<li>Five</li>
</ul>Wyjścia One | Two | Three | Four | Five | zamiast One | Two | Three | Four | Five
Ktoś wie jak CSS wybrać wszystkie oprócz ostatniego elementu?
Możesz zobaczyć definicję selektora :not() tutaj
6 answers
Jeśli jest problem z selektorem not, możesz ustawić je wszystkie i nadpisać ostatni
li:after
{
content: ' |';
}
li:last-child:after
{
content: '';
}
Lub jeśli można użyć przed, nie ma potrzeby ostatniego dziecka
li+li:before
{
content: '| ';
}
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-03-16 12:03:48
Wszystko wydaje się być poprawne. Możesz użyć poniższego selektora css zamiast tego, czego użyłeś.
ul > li:not(:last-child):after
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
2013-08-01 18:54:47
Twój przykład jako napisany działa dla mnie doskonale w Chrome 11. Być może twoja przeglądarka po prostu nie obsługuje selektora :not()?
Może być konieczne użycie JavaScript lub podobne, aby wykonać tę przeglądarkę. jQuery implementuje :not() w swoim API selektora.
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-03-27 14:47:12
Twoja próbka nie działa w IE dla mnie, musisz określić Doctype header w dokumencie, aby renderować swoją stronę w standardowy sposób w IE, aby użyć właściwości content CSS:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<head>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<html>
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
<li>Five</li>
</ul>
</html>
Drugi sposób to użycie selektorów CSS 3
li:not(:last-of-type):after
{
content: " |";
}
Ale nadal musisz podać Doctype
A trzecim sposobem jest użycie JQuery z jakimś skryptem jak poniżej:
<script type="text/javascript" src="jquery-1.4.1.js"></script>
<link href="style2.css" rel="stylesheet" type="text/css">
</head>
<html>
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
<li>Five</li>
</ul>
<script type="text/javascript">
$(document).ready(function () {
$("li:not(:last)").append(" | ");
});
</script>
Zaletą trzeciego sposobu jest to, że nie musisz podawać doctype, a jQuery zajmie się tym zgodności.
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-12-21 10:49:09
Przykład użycia CSS
ul li:not(:last-child){
border-right: 1px solid rgba(153, 151, 151, 0.75);
}
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-07-26 20:57:11
Możesz tego spróbować, wiem, że nie jest to odpowiedź, której szukasz, ale koncepcja jest taka sama.
Gdzie ustawiasz style dla wszystkich dzieci, a następnie usuwasz je z ostatniego dziecka.
Fragment Kodu
li
margin-right: 10px
&:last-child
margin-right: 0
Obraz
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
2018-09-19 12:23:51