CSS:not(:마지막 자식):선택기 이후
다음과 같은 스타일의 요소 목록이 있습니다.
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>출력One | Two | Three | Four | Five |대신에One | Two | Three | Four | Five
마지막 요소를 제외한 모든 요소를 CSS로 선택하는 방법을 아는 사람?
의 정의를 확인할 수 있습니다.:not()여기 선택기
선택기가 아닌 경우 모든 선택기를 설정하고 마지막 선택기를 재정의할 수 있습니다.
li:after
{
content: ' |';
}
li:last-child:after
{
content: '';
}
또는 이전에 사용할 수 있다면 마지막 아이가 필요하지 않습니다.
li+li:before
{
content: '| ';
}
모든 것이 맞는 것 같습니다.당신은 당신이 사용한 것 대신에 다음의 css 선택기를 사용하는 것이 좋을 것입니다.
ul > li:not(:last-child)::after
저에게는 잘 작동합니다.
&:not(:last-child){
text-transform: uppercase;
}
당신이 작성한 예시는 크롬 11에서 완벽하게 작동합니다.아마도 당신의 브라우저는 단지 그것을 지원하지 않을 것입니다.:not()셀렉터?
이 크로스 브라우저를 수행하려면 JavaScript 또는 유사한 기능을 사용해야 할 수 있습니다.jQuery는 선택기 API에서 not()을 구현합니다.
CSS를 사용한 예
ul li:not(:last-child){
border-right: 1px solid rgba(153, 151, 151, 0.75);
}
당신의 샘플은 나에게 IE에서 작동하지 않습니다. 당신은 콘텐츠 CSS 속성을 사용하기 위해 IE에서 당신의 페이지를 표준 방식으로 렌더링하기 위해 문서에 Doctype 헤더를 지정해야 합니다.
<!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>
두 번째 방법은 CSS 3 선택기를 사용하는 것입니다.
li:not(:last-of-type):after
{
content: " |";
}
그러나 여전히 Doctype을 지정해야 합니다.
세 번째 방법은 JQuery를 다음과 같은 스크립트와 함께 사용하는 것입니다.
<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>
세 번째 방법의 장점은 doctype을 지정할 필요가 없으며 jQuery가 호환성을 처리한다는 것입니다.
마지막 자식 앞에 있는 :와 다음을 제거하고 사용합니다.
ul li:not(last-child){
content:' |';
}
바라건대, 효과가 있을 것입니다.
마지막 자식 앞에 있는 :와 다음을 제거하고 사용합니다.
ul > li:not(:last-child):after {
border-bottom: none !important;
}
언급URL : https://stackoverflow.com/questions/5449872/css-notlast-childafter-selector
'sourcetip' 카테고리의 다른 글
| Angular Http Client의 baseUrl은 어떻게 설정합니까? (0) | 2023.08.26 |
|---|---|
| 주 스크롤 막대를 항상 표시 (0) | 2023.08.26 |
| 각 루프를 거치지 않고 사전 개체에서 모든 키(키만)를 가져오는 방법 (0) | 2023.08.21 |
| Pandas: Excel에서 병합된 헤더 열 구문 분석 (0) | 2023.08.21 |
| PSObject, Hashtable 및 PSCustomObject 간의 차이 (0) | 2023.08.21 |