하이퍼 링크 태그를 배우십시오

CSS를 사용하여 하이퍼 링크 스타일을 정의했지만 브라우징시 호버 (마우스 호버)는 작동하지 않습니다. 왜 이런 일이 일어나고 있습니까? 브라우저 문제입니까?

그 이유는 브라우저 문제라고 생각하지만 스타일 정의가 잘못된 순서 일 가능성이 높습니다. 다른 상태에서 연결 스타일을 볼 수 있도록 올바른 스타일 순서는 다음과 같습니다.

링크 - 방문 - 호버 - 활성 또는 LVHA (약어).

핵심 콘텐츠 :

각 선택기에는 특이성이 있습니다. 두 명의 선택기가 동일한 요소에 적용되면 특이성이 높은 선택기가 승리하고 우선 순위가 있습니다. 예를 들어:

p.hithere {color : green;} / * 특이성 = 1,1 * /

p {색상 : 빨간색;} / * 특이성 = 1 * /

클래스 클래스 = hithere가있는 모든 단락 내용은 빨간색 대신 녹색으로 표시됩니다. 두 선택기 모두 컬러 세트가 있지만 특이성이 높은 선택기는 승리합니다.

의사 클래스는 특이성에 어떤 영향을 미칩니 까? 그들은 정확히 동일한 가중치 값을 가지며 다음 스타일은 동일한 특정 가중치 값을 갖습니다.

A : Link {Color : Blue;} / * 특이성 = 1,1 * /

A : Active {Color : Red;} / * 특이성 = 1,1 * /

A : 호버 {색상 : magenta;} / * 특이성 = 1,1 * /

A : 방문 {색상 : 자주색;} / * 특이성 = 1,1 * /

하이퍼 링크의 스타일 설정입니다. 대부분의 경우 이러한 스타일 중 일부는 동시에 설정해야합니다. 예를 들어, 방문되지 않은 하이퍼 링크는 호버링 및 클릭 할 때 마우스 호버 및 마우스 활성화 모두에서 다양한 스타일로 설정할 수 있습니다. 위의 세 가지 규칙은 하이퍼 링크에 적용될 수 있고 모든 선택기는 동일한 특이성을 가지므로 규칙에 따라 마지막 스타일이 승리합니다. 따라서 액티브 스타일은 항상 호버 스타일로 덮여 있기 때문에 결코 표시되지 않습니다 (즉, 호버가 선호 됨). 이제 방문한 하이퍼 링크 마우스 오버의 효과가 무엇인지 분석하겠습니다. 결과는 항상 자주색입니다.

이것이 CSS1이 스타일 순서를 권장하는 이유입니다.

A : 링크

A : 방문

A : 호버

A : 활성

실제로, 처음 두 스타일의 순서는 하이퍼 링크가 연립 상태와 접근 상태와 동시에 존재할 수 없기 때문에 교체 될 수 있습니다. (: 링크는 방문하지 않는 것을 의미합니다. 왜 이와 같이 정의되지 않은지 모르겠습니다.)

CSS2는 이제 의사 클래스가 노조 그룹에 나타날 수 있도록합니다.

A : 방문 : 호버 {색상 : 적갈색;} / * 특이도 = 2,1 * /

A : 링크 : 호버 {색상 : magenta;} / * 특이성 = 2,1 * /

A : 호버 : Active {Color : Cyan;} / * 특이도 = 2,1 * /

그들은 같은 특이성을 가지고 있지만 근본적으로 다른 짐승에 적용되므로 충돌하지 않습니다. 예를 들어 호버 활성 조합을 얻을 수 있습니다.

이 기사와 관련된 특이성을 이해하는 방법은 무엇입니까? 특이성은 단순히 함께 연결되지 않은 숫자 문자열로 이해 될 수 있습니다.

p.hithere {color : green;} / * 특이성 = 11 * /

p {색상 : 빨간색;} / * 특이성 = 1 * /

이것은 소수점을 기준으로 간단한 작업 인 것 같습니다. 그러나 특이성 계산은 10 진수 알고리즘을 사용할 수 없습니다. 예를 들어, 15 개의 선택기를 함께 사용하는 경우 특정 가중 값은 여전히 ​​간단한 클래스 선택기보다 낮습니다. 예를 들어:

.Hello {색상 : 빨간색;} / * 특이성 = 10 * /

Html Body Div Ul Li ol Li ul Li ul Li ul Li ul Li Li Li (색 : 녹색;} / * 특이도 = 15 * /

10은 실제로 10이 아닌 1을 따르는 특이성입니다. 다음과 같은 이전 스타일 규칙을 설명하기 위해 16 진수를 사용 할 수 있습니다.

.Hello {색상 : 빨간색;} / * 특이성 = 10 * /

Html Body Div Ul Li ol Li ul Li ul Li ul Li ul Li Li Li (색 : 녹색;} / * 특정 = f * /

유일한 문제는 두 번째 스타일 규칙에 둘 이상의 선택기를 추가하려면 다시 혼란스러워하는 특정 17을 얻을 수 있다는 것입니다. 실제로, 특이성은 무한 할 수 있으므로 더 많은 혼란을 피하기 위해 쉼표를 사용하여 특정 값을 분리하는 것이 좋습니다.