반응형
CSS : before 및 : first-child 결합
다음 코드를 사용하여 메뉴 항목 사이에 구분 기호를 추가하고 있습니다.
#navigation_center li:before {
content: "| ";
color: #fff;
}
이제 첫 번째 항목 앞에 구분 기호가 없어야하므로 다음 코드를 알아 냈습니다.
#navigation_center li:before:first-child {
content: none;
}
그러나 그것은 아무것도하지 않습니다. : before와 : first-child를 결합 할 수 있습니까?
시험
#navigation_center li:first-child:before {
content: '';
}
편집 : FelipeAls의 의견 으로이 답변을 확장하고 싶었습니다. :first
유효한 CSS 선택자가 아닌 사용 된 원래 질문 입니다. 대신 :first-child
. 또한 의사 선택기의 순서도 중요합니다. 첫 번째 자식 선택자가 먼저 와야합니다.
나는 :before
선택자에 대한 일종의 수정 자로 생각하는 경향이 있습니다. 실제로 선택한 요소 바로 앞의 공간 만 요소를 선택하지는 않습니다.
hradac 의 답변이 트릭을 수행해야 하지만 신규 이민자 를 돕기 위해 가능한 순열을 실행하는 것이 가장 좋을 것이라고 생각했습니다.
.works:first-child:before
{
color: green;
content: 'working ';
}
.works:not(:first-child):after
{
color: green;
content: ' is working';
}
.broken:before:first-child
{
color: red;
content: 'this will never show up';
}
.broken:after:not(:first-child)
{
color: red;
content: 'and this will not show up either';
}
works:
<div>
<div class='works'>
something
</div>
<div class='works'>
something
</div>
<div class='works'>
something
</div>
</div>
<hr/>
broken:
<div>
<div class='broken'>
something
</div>
<div class='broken'>
something
</div>
<div class='broken'>
something
</div>
</div>
이것을 분해 해보자 :
- 3 개
div.works
는 div 안에 있습니다. - 세
div.broken
개도 div 안에 있습니다. - CSS의 첫 번째 규칙은 앞에 녹색 텍스트 "working"을 추가합니다. 그것은을 선택하여 그렇게
first-child
한 후 바로 전에 빈 공간을 선택. - 두 번째 규칙은 첫 번째 뒤에 오는 각 블록 뒤에 "작동 중"을 추가합니다. 유 추적으로
first-child
정의에 속하지 않는 각 블록을 먼저 선택한 다음 그 앞에있는 빈 공간을 선택합니다. - The following two rules, will not find a block to attack themselves to. The
:before:first-child
attempts to select an empty space, but then tests if it is afirst-child
and it is not (since technically it's not yet in the DOM tree), the similar problem is with:not(:first-child)
.
ReferenceURL : https://stackoverflow.com/questions/9822440/css-before-and-first-child-combined
반응형
'programing' 카테고리의 다른 글
Eclipse의 JUNIT 테스트 클래스-java.lang.ClassNotFoundException (0) | 2021.01.15 |
---|---|
CORS 요청-쿠키가 전송되지 않는 이유는 무엇입니까? (0) | 2021.01.15 |
CSS Calc 뷰포트 단위 해결 방법? (0) | 2021.01.15 |
R에서 이메일을 어떻게 보내나요? (0) | 2021.01.15 |
3D 충돌 / 물체 감지는 어떻게 작동합니까? (0) | 2021.01.15 |