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가 그의 논평에서 설명했던 것 때문에 가능합니다 .
CSS 2 :after에서는 ::after. CSS 3을 사용 하는 경우은 의사 요소 ::after이므로 (두 개의 세미 열)을 사용하십시오 ( ::after단일 세미 열은 의사 클래스 용입니다).
답변
그럼에도 불구하고 누군가가 이것으로부터 이익을 얻을 수 있습니다.
li:not(:last-child)::after { content: ","; }
li:last-child::after { content: "."; }이것은 CSS3와 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: "."; }답변
이 질문에 대한 또 다른 답변을 추가하는 이유는 @derek이 요청한 것이 정확히 필요했기 때문이며 여기에서 답변을보기 전에 이미 조금 더 나아갔습니다. 특히, 내가 CSS를 필요로 그 수 또한 쉼표가 원하지 않는 정확히 두 개의 목록 항목의 경우를 설명합니다. 예를 들어, 제가 제작하고자하는 저자별 바이 라인은 다음과 같습니다.
한 명의 저자 :
By Adam Smith.
두 명의 저자 :
By Adam Smith and Jane Doe.
세 명의 저자 :
By Adam Smith, Jane Doe, and Frank Underwood.
여기에 이미 제공된 솔루션은 한 명의 작성자와 3 명 이상의 작성자에게 적용되지만 “Oxford Comma”스타일 (일부에서는 “Harvard Comma”스타일이라고도 함)이 적용되지 않는 두 명의 작성자 사례를 고려하지 않습니다. -즉, 접속사 앞에 쉼표가 없어야합니다.
오후에 땜질을 한 후 다음을 생각해 냈습니다.
<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>위에있는대로 바이 라인을 표시합니다.
결국 li성가심을 피하기 위해 요소 사이의 공백도 제거해야했습니다 . 그렇지 않으면 인라인 블록 속성이 각 쉼표 앞에 공백을 남길 것입니다. 대체 괜찮은 해킹이있을 수 있지만이 질문의 주제는 아니므로 다른 사람이 대답하도록 남겨 두겠습니다.
여기 바이올린 : http://jsfiddle.net/5REP2/
답변
하나, 둘, 셋 같은 것을 가지 려면 CSS 스타일을 하나 더 추가해야합니다.
li:nth-last-child(2):after {
content: ' ';
}두 번째 마지막 요소에서 쉼표를 제거합니다.
완전한 코드
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>