CSS 유사 요소 결합 :“: after”“: last-child”
CSS를 사용하여 "문법적으로 올바른"목록을 만들고 싶습니다. 이것이 내가 지금까지 가진 것입니다.
<li>태그는 그 후 쉼표로 수평으로 표시됩니다.
li { display: inline; list-style-type: none; }
li:after { content: ", "; }
작동하지만 "마지막 자식"에는 쉼표 대신 마침표가 있어야합니다. 그리고 가능하다면 "마지막 자식"앞에 "and"를 붙이고 싶습니다. 내가 스타일링하는 목록은 동적으로 생성되므로 "마지막 자녀"에게 클래스를 줄 수는 없습니다. 의사 요소를 결합 할 수는 없지만 기본적으로 달성하려는 효과입니다.
li:last-child li:before { content: "and "; }
li:last-child li:after { content: "."; }
이 작업을 어떻게합니까?
이것은 작동합니다 :) (멀티 브라우저, Firefox가 좋아하기를 바랍니다)
li { display: inline; list-style-type: none; }
li:after { content: ", "; }
li:last-child:before { content: "and "; }
li:last-child:after { content: "."; }<html>
<body>
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
</body>
</html><menu> 요소의 목록 항목에 대해 이것을 좋아합니다. 다음 마크 업을 고려하십시오.
<menu>
<li><a href="/member/profile">Profile</a></li>
<li><a href="/member/options">Options</a></li>
<li><a href="/member/logout">Logout</a></li>
</menu>
다음 CSS로 스타일을 지정합니다.
menu > li {
display: inline;
}
menu > li:after {
content: ' | ';
}
menu > li:last-child:after {
content: '';
}
다음이 표시됩니다 :
Profile | Options | Logout
그리고 이것은 Martin Atkins가 자신의 의견에 대해 설명 한 것 때문에 가능합니다
그럼에도 불구하고 누군가가 이것으로부터 이익을 얻을 수 있습니다 :
li:not(:last-child)::after { content: ","; }
li:last-child::after { content: "."; }
이것은 CSS3 및 [unested] CSS2에서 작동합니다.
의사 요소를 결합 할 수 있습니다 ! 죄송합니다, 질문을 게시 한 직후 에이 것을 알아 냈습니다. 호환성 문제로 인해 덜 일반적으로 사용됩니다.
li:last-child:before { content: "and "; }
li:last-child:after { content: "."; }
이것은 수영으로 작동합니다. CSS는 놀랍습니다.
CSS 3에서 언급하자면
:후
이처럼 사용해야합니다
::후
에서 https://developer.mozilla.org/de/docs/Web/CSS/::after :
의사 클래스와 의사 요소를 구별하기 위해 :: after 표기법이 CSS 3에 도입되었습니다. 브라우저는 CSS 2에 도입 된 후에도 표기법을 받아들입니다.
따라서 다음과 같아야합니다.
li { display: inline; list-style-type: none; }
li::after { content: ", "; }
li:last-child::before { content: "and "; }
li:last-child::after { content: "."; }
Adding another answer to this question because I needed precisely what @derek was asking for and I'd already gotten a bit further before seeing the answers here. Specifically, I needed CSS that could also account for the case with exactly two list items, where the comma is NOT desired. As an example, some authorship bylines I wanted to produce would look like the following:
One author: By Adam Smith.
Two authors: By Adam Smith and Jane Doe.
Three authors: By Adam Smith, Jane Doe, and Frank Underwood.
The solutions already given here work for one author and for 3 or more authors, but neglect to account for the two author case—where the "Oxford Comma" style (also known as "Harvard Comma" style in some parts) doesn't apply - ie, there should be no comma before the conjunction.
After an afternoon of tinkering, I had come up with the following:
<html>
<head>
<style type="text/css">
.byline-list {
list-style: none;
padding: 0;
margin: 0;
}
.byline-list > li {
display: inline;
padding: 0;
margin: 0;
}
.byline-list > li::before {
content: ", ";
}
.byline-list > li:last-child::before {
content: ", and ";
}
.byline-list > li:first-child + li:last-child::before {
content: " and ";
}
.byline-list > li:first-child::before {
content: "By ";
}
.byline-list > li:last-child::after {
content: ".";
}
</style>
</head>
<body>
<ul class="byline-list">
<li>Adam Smith</li>
</ul>
<ul class="byline-list">
<li>Adam Smith</li><li>Jane Doe</li>
</ul>
<ul class="byline-list">
<li>Adam Smith</li><li>Jane Doe</li><li>Frank Underwood</li>
</ul>
</body>
</html>
It displays the bylines as I've got them above.
In the end, I also had to get rid of any whitespace between li elements, in order to get around an annoyance: the inline-block property would otherwise leave a space before each comma. There's probably an alternative decent hack for it but that isn't the subject of this question so I'll leave that for someone else to answer.
Fiddle here: http://jsfiddle.net/5REP2/
To have something like One, two and three you should add one more css style
li:nth-last-child(2):after {
content: ' ';
}
This would remove the comma from the second last element.
Complete Code
li {
display: inline;
list-style-type: none;
}
li:after {
content: ", ";
}
li:nth-last-child(2):after {
content: '';
}
li:last-child:before {
content: " and ";
}
li:last-child:after {
content: ".";
}<html>
<body>
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
</body>
</html>I am using the same technique in a media query which effectively turns a bullet list into an inline list on smaller devices as they save space.
So the change from:
- List item 1
- List item 2
- List item 3
to:
List Item 1; List Item 2; List Item 3.
참고URL : https://stackoverflow.com/questions/2351623/combining-css-pseudo-elements-after-the-last-child
'Programing' 카테고리의 다른 글
| http get 요청에서 헤더를 설정하는 방법은 무엇입니까? (0) | 2020.07.17 |
|---|---|
| 스크립트를 비동기 적으로로드 (0) | 2020.07.17 |
| C # 컴파일러로 생성 된 MSIL / CIL을 어떻게 볼 수 있습니까? (0) | 2020.07.17 |
| 캐시 제어에서 개인 대 공개 (0) | 2020.07.17 |
| 브라우저가 팝업을 차단하고 있는지 어떻게 알 수 있습니까? (0) | 2020.07.17 |