쓰는 방법 : 전에 및 a : 후에 조건을 가리 킵니까?

347

쓰는 :hover법과 :visited조건은 a:before?

노력하고 a:before:hover있지만 작동하지 않습니다

488

이것은 실제로하려는 일에 달려 있습니다.

요소가 의사 클래스와 일치 :before할 때 의사 요소에 스타일을 적용하려면 간단히 a작성 a:hover:before하거나 a:visited:before대신 작성해야합니다 . 의사 요소는 의사 클래스 뒤에 옵니다 (실제로 전체 선택기의 끝에서). 또한 그것들은 서로 다른 두 가지입니다. 이것을 "의사 선택기"라고 부르면 이와 같은 구문 문제가 발생하면 혼동 될 것입니다.

CSS3를 작성하는 경우 이중 구분선으로 의사 요소를 표시하여이 구분을 더 명확하게 할 수 있습니다. 따라서, a:hover::before및 a:visited::before. 그러나 IE8 및 이전 버전과 같은 레거시 브라우저를 개발하는 경우 단일 콜론을 사용하면 문제를 해결할 수 있습니다.

의사 클래스와 의사 요소의 특정 순서는 사양에 명시되어 있습니다 .

하나의 의사 요소가 선택기의 마지막 단순 선택기 시퀀스에 추가 될 수 있습니다.

간단한 시퀀스 선택기는 연결자에 의해 분리되지 않는 간단한 선택기의 체인이다. 항상 유형 선택기 또는 범용 선택기로 시작합니다. 시퀀스에서 다른 유형 선택기 또는 범용 선택기는 허용되지 않습니다.

간단한 선택기 어느 타입 선택기 선택자, 속성 선택기 클래스 선택기 ID 선택기 또는 가상 클래스이다.

의사 클래스는 간단한 선택기입니다. 그러나 의사 요소는 단순한 선택기와 유사하지만 그렇지 않습니다.

그러나 :hover¹ 과 같은 사용자 작업 의사 클래스의 경우 사용자가 의사 요소 자체와 상호 작용하고 요소가 아닌 요소와 상호 작용할 때만 적용하려면이 효과가 필요한 경우 a모호한 레이아웃 종속 해결 방법 이외의 다른 방법으로는 불가능합니다 . 텍스트에서 알 수 있듯이 표준 CSS 의사 요소는 현재 의사 클래스를 가질 수 없습니다. 이 경우 :hover의사 요소 대신 실제 자식 요소 에 적용해야합니다 .

¹ _{물론 :visited의사 요소는 링크가 아니기 때문에 질문 과 같이 의사 클래스를 연결하는 경우에는 적용되지 않습니다 .}

— BoltClock
소스

27

부모 요소 위에 마우스를 올리면 부모 요소가있는 한 :: after 유사 요소가 마우스 아래에없는 경우에도 장식이 적용됩니다.

— SamGoody 2016 년

6

또한 레이아웃 규칙이 지정된 방식으로 인해 이에 응답 하지 않는 많은 것들이 text-decoration있습니다.

— Chris Krycho

1

@Chris Krycho : 실제로-실제로 여기 의사 요소와 관련하여이 특정 문제에 대한 설명이 있습니다 . 물론 문제 자체가 의사 클래스 / 의사 요소 선택기 와 관련이 없지만 레이아웃 문제 와 관련이 있음을 분명히 밝힐 가치가 있습니다.

— BoltClock

@BoltClock 나는 이 의견을 남긴 직후에 그 대답을 크게 찬성했습니다 . 후자.

— Chris Krycho

2

Sinlge 콜론 (:)은 유사 클래스를 지정하고 이중 콜론 (: :)은 유사 요소를 지정합니다. 호버 :: 전 : 그것은해야합니다 그래서

— mikkelbreum

107

a:hover::before대신 쓰기 a::before:hover: example .

— Sandeep
소스

2

@mikkelbreum 당신은 그것을 증명하는 참조가 있습니까?

— shea

3

@bungeshea : CSS3 구문입니다. 내 답변 아래의 의견과 최근 편집 내용을 참조하십시오. CSS1 / 2 유사 요소에는 단일 콜론과 이중 콜론이 모두 허용되므로 "올바른 구문"이라고 부르는 것은 약간 부정확합니다. 오늘날 레거시 구문을 계속 사용하는 유일한 이유는 IE8 및 이전 버전을 지원하기 때문에 권장 구문 이라고합니다 .

— BoltClock

@mikkelbreum @sheabunge CSS2에 대한 추가 정보를 원하시면 :afterCSS3 대 ::after developer.mozilla.org/en-US/docs/Web/CSS/::after을 (하나가 :더 나은 지원을하고있다)

— 트래비스

그것은 밑줄을 위해 작동하지 않습니다 :( jsfiddle.net/porzechowski/u5dhthvq 또한 표시하십시오 : 인라인 블록; jsfiddle.net/porzechowski/u89fo4oq

— plusz

7

마우스 오버시 메뉴 링크의 텍스트를 변경합니다. (호버의 다른 언어 텍스트)는 다음과 같습니다.

jsfiddle 예제

html :

<a align="center" href="#"><span>kannada</span></a>

CSS :

span {
    font-size:12px;
}
a {
    color:green;
}
a:hover span {
    display:none;
}
a:hover:before {
    color:red;
    font-size:24px;
    content:"ಕನ್ನಡ";
}

— 라오
소스

1

이것은 멋진 답변입니다. 사실, 그것은 나에게 영감을 약간 바이올린을 확장 , 대체 텍스트에 맞게 24 픽셀로 스팬 텍스트의 글꼴 크기를 강화하여 이전과는 동일한 폭을 차지 있도록 대체 텍스트 후 3 바꿈하지 않는 공백을 추가하고, 로 스타일 a:hover::before을 text-decoration: underline지정하면 밑줄이 대체 텍스트의 빨간색을 선택합니다.

— Dave Land

4

사용하려고 .card-listing:hover::after hover하고 after사용하여 ::그것을 줘야 일을

— Subindas 오후
소스

1

BoltClock의 답변이 맞습니다. 내가 추가하려는 유일한 것은 의사 요소 만 선택하려면 범위를 두는 것입니다.

예를 들면 다음과 같습니다.

<li><span data-icon='u'></span> List Element </li>

대신에:

<li> data-icon='u' List Element</li>

이렇게하면 간단하게 말할 수 있습니다

ul [data-icon]:hover::before {color: #f7f7f7;}

이것은 전체 li 요소가 아닌 가상 요소만을 강조합니다.

— Brinx
소스

-2

이 코드에서와 같이 올바른 괄호 ( ">")를 사용하여 작업을 하나의 클래스로 제한 할 수도 있습니다.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style type="text/css">
    span {
    font-size:12px;
    }
    a {
        color:green;
    }
    .test1>a:hover span {
        display:none;
    }
    .test1>a:hover:before {
        color:red;
        content:"Apple";
    }
  </style>
</head>

<body>
  <div class="test1">
    <a href="#"><span>Google</span></a>
  </div>
  <div class="test2">
    <a href="#"><span>Apple</span></a>
  </div>
</body>

</html>

참고 : hover : before 스위치는 .test1 클래스에서만 작동합니다.

— 스테판 그루 엔 발트
소스