CSS 테스트 포인트 중 하나, 태그, 의사 클래스

1. <a> 태그에서 흔히 사용되는 의사 클래스 개요

    a:link{color:blue}                                                     
    a:visited{color:red}
    a:hover{color:green}
    a:active{color:purple}

• link 링크가 있고 해당 링크를 방문하지 않은 경우 이 의사 클래스는 활성화됩니다.

• vistied 이 의사 클래스는 링크를 방문했을 때 활성화됩니다.

• hover 마우스를 링크 위로 가져가면 이 의사 클래스는 마우스가 링크에서 멀어질 때까지 활성화됩니다.

• active 이 의사 클래스는 링크를 마우스로 클릭하면 활성화됩니다. 클릭한 후에는 마우스가 놓이지 않는다는 점에 유의하세요. 이 의사 클래스는 마우스를 놓을 때까지 활성화됩니다.

• 2. <a>태그 의사 클래스 작성 순서에 대한 자세한 설명

• 왜 의사 클래스 작성 순서를 고려해야 합니까? 수업?

  먼저 CSS(Cascading Style Sheets)의 전체 이름은 Cascading Style Sheets로 번역됩니다. 여러 규칙이 요소의 동일한 속성을 정의하는 경우가 있습니다. 이 경우 어떻게 해야 합니까? CSS는 계단식 원칙을 사용하여 스타일 선언을 고려하여 충돌하는 규칙 중 어떤 규칙이 적용되어야 하는지 결정합니다. 우선, 작성한 스타일이 브라우저의 기본 스타일과 충돌하는 경우 작성한 스타일이 우선합니다. 이를 바탕으로 CSS는 계단식 원리를 사용하여 특정성, 순서, 중요도를 고려하여 충돌하는 규칙 중 어떤 규칙이 적용되어야 하는지 결정합니다. 용어에 얽매이지 말고 한번 시도해 보면 CSS가 적용할 스타일과 시기를 어떻게 결정하는지 이해하게 될 것입니다. ¹
  둘째, <a> 태그의 4개의 의사 클래스는 동일한 특수성을 가지므로 링크가 여러 의사 클래스가 동시에 활성화된 상태일 경우 의사 클래스 의 작성 순서가 중요한 역할을 하여 최종 표시 효과에 영향을 미칩니다. 이것이 의사 클래스가 작성되는 순서를 고려해야 하는 이유입니다.

어떤 의사 클래스가 동시에 활성화되어 디스플레이 효과에 영향을 미치나요?

  첫째, 사실 두 가상 클래스 :link와 :visited 사이의 순서는 중요하지 않습니다. 동시에 발동될 수 없기 때문입니다. 즉, 방문하지 않은 동시에 방문했기 때문입니다. 일부 사람들은 :link을 요소에 대한 링크가 존재하는 한 활성화된다는 의미로 이해합니다. 이는 잘못된 것입니다. 링크를 방문하면 :link는 더 이상 활성화되지 않습니다. 실험을 해보자.

a:visited{color:red}                                                 
a:hover{color:green}
a:active{color:purple}
a:link{color:blue}

  맨 끝에 :link를 넣었습니다. 처음에는 링크를 클릭하거나 마우스를 클릭해도 색상이 변하지 않고 항상 파란색입니다. 처음으로 마우스를 클릭하고 놓으면 색상이 빨간색으로 변경됩니다. 그런 다음 다시 마우스를 가져가면 녹색으로 변하고, 다시 클릭하면 보라색으로 변하고, 다시 놓으면 빨간색으로 돌아갑니다. 파란색은 다시 나타나지 않습니다. 이 시점에서 링크는 여전히 존재하지만 방문한 적이 있으므로 :link 의사 클래스는 더 이상 활성화되지 않습니다.
둘째, 사용자 습관의 관점에서 링크 방문 여부, 링크 위에 마우스를 올리면 색상이 변경되기를 바라며, 링크 방문 여부에 따라 색상 변경이 동일해야 합니다. . 따라서 :hover은 :link과 :visited

a:link{color:blue}                                                 
a:visited{color:red}

a:hover{color:green}

   뒤에 위치해야 합니다. 셋째, 사용자 습관의 관점에서 링크 방문 여부에 관계없이 해당 링크가 마우스를 클릭하면 색상이 변경되며 결과 색상 변경은 링크 방문 여부에 관계없이 동일해야 합니다. 따라서 :active는 :link과 :visited

a:link{color:blue}                                                
a:visited{color:red}

a:active{color:purple}

 다음에 위치해야 합니다. 넷째, 항상 링크 위에 마우스를 먼저 올려놓고 클릭하면 예상되는 효과는 색상 변경입니다. 마우스를 클릭할 때 발생하고, 마우스를 클릭할 때 또 다른 색상 변경이 발생합니다. 활성 상태 뒤에 마우스를 올리면 링크를 클릭할 때 활성 상태를 활성화하는 동안 실제로 마우스 오버 의사 클래스가 트리거됩니다. 마우스 오버는 그 뒤에 있는 활성 색상을 가리므로 활성 색상을 볼 수 없습니다. 따라서 hover는 활성화되기 전에 옵니다. ²

a:link{color:blue}                                                   
a:visited{color:red}
a:hover{color:green}
a:active{color:purple}

  순서를 기억하는 공식: "LoVe, HA"

CSS 테스트 포인트 중 하나인 <a> 의사 클래스 관련 기사 PHP 중국어 웹사이트!