하이퍼링크A Markup_HTML/Xhtml_웹페이지 제작 배우기

Q:
CSS를 사용하여 하이퍼링크 스타일을 정의했는데 탐색 시 마우스오버(마우스 오버)가 작동하지 않습니다. 왜 이런 일이 발생합니까? 브라우저 문제인가요?
답변:
가능한 원인이 브라우저 문제라고 생각하더라도 스타일 정의 순서가 잘못되었을 가능성이 더 높습니다. 다양한 상태의 연결 스타일을 볼 수 있도록 하려면 올바른 스타일 순서가
" 링크 - 방문 - 마우스오버 - 활성 " 또는 " LVHA "(약어)여야 합니다.
핵심 내용:
각 선택자 선택자는 "특정성"을 갖습니다. 두 개의 선택자가 동일한 요소에 적용되면 특이성이 더 높은 선택자가 우선권을 갖습니다. 예:
P.hithere {color: green;} /* 특이성 = 1,1 */
P {color: red;} /* 특이성 = 1 */
모든 설정된 클래스 class=hithere 단락 내용이 빨간색이 아닌 녹색으로 나타납니다. 두 선택자 모두 색상을 설정하지만 더 높은 특이성을 가진 선택자가 승리합니다.
의사 클래스는 특이성에 어떤 영향을 미치나요? 두 스타일은 정확히 동일한 가중치 값을 가지며 다음 스타일은 동일한 특이성 가중치 값을 갖습니다.
A:link {color: blue;} /* 특이성 = 1,1 */
A:active {color: red ;} /* 특이성 = 1,1 */
A:hover {color: magenta;} /* 특이성 = 1,1 */
A:visited {color: purple;} /* 특이성 = 1, 1 * /
하이퍼링크에 대한 스타일 설정입니다. 대부분의 경우 여러 스타일을 동시에 설정해야 합니다. 예를 들어 방문하지 않은 하이퍼링크는 마우스를 가리키고 클릭할 때 "마우스 가리키기"와 "마우스 활성화"의 두 가지 상태에서 서로 다른 스타일을 설정할 수 있습니다. 위의 세 가지 규칙은 모두 하이퍼링크에 적용될 수 있으며 모든 선택기는 동일한 특이성을 가지며 규칙에 따라 마지막 스타일이 "승리"됩니다. 따라서 "활성" 스타일은 항상 "hover" 스타일로 재정의되므로 표시되지 않습니다(예: "hover"가 우선 적용됨). 이제 방문한 하이퍼링크에 대한 마우스 오버의 효과를 분석해 보겠습니다. "방문한" 스타일이 항상 다른 상태 스타일 규칙("활성" 및 "호버" 포함)보다 우선하기 때문에 결과는 항상 보라색입니다.
이것이 CSS1이 스타일 순서를 권장하는 이유입니다:
A:link
A:visited
A:hover
A:active
사실 시작 부분 두 스타일의 순서는 다음과 같습니다. 반대로, 하이퍼링크는 "방문하지 않음" 상태와 "방문함" 상태를 동시에 가질 수 없기 때문입니다( :link는 "방문하지 않음"을 의미합니다. 왜 이렇게 정의되지 않았는지 모르겠습니다.)
CSS2에서는 이제 의사- 클래스는 "결합된 그룹" 형태로 표시됩니다. 예:
A:visited:hover {color: maroon;} /* 특정성 = 2,1 */
A:link:hover { color: magenta ;} /* 특이성 = 2,1 */
A:hover:active {color: 시안;} /* 특이성 = 2,1 */
특이성은 동일하지만 근본적으로 다른 짐승에 적용됩니다. 예를 들어 호버 활성 조합을 얻을 수 있습니다.
이 기사에 포함된 "특수성"을 이해하는 방법은 예를 들어 단순히 서로 연결되지 않은 숫자 문자를 이해할 수 있다는 것입니다. 위:
P.hithere {color: green;} /* 특정성 = 11 */
P {color: red;} /* 특정성 = 1 */
이것은 다음을 기반으로 하는 간단한 연산인 것 같습니다. 그러나 십진수 알고리즘은 "특이성"을 계산하는 데 사용할 수 없습니다. 예를 들어 15개의 선택기를 함께 사용하는 경우 해당 "특이성" 가중치는 여전히 단순 클래스 선택기보다 낮습니다. 안녕하세요 {color: red;} /* 특이성 = 10 */
HTML BODY DIV UL LI OL LI UL LI OL LI UL LI OL LI (color: green;} /* 특이성 = 15 */
" 10 "는 실제로 "1" 뒤에 "10"이 아닌 "0"이 옵니다. 다음과 같이 16진수를 사용하여 이전 스타일 규칙의 구체성을 설명할 수 있습니다.
.hello {color: red;} / * 구체성 = 10 */
HTML BODY DIV UL LI OL LI UL LI OL LI UL LI OL LI (color: green;} /* 특정성 = F */
유일한 문제는 두 번째를 원하는 경우입니다. 스타일 규칙에 대한 두 개 이상의 선택기를 사용하면 "17"의 특이도가 발생하여 다시 혼란을 야기할 수 있습니다. 실제로 특이성은 무한할 수 있으므로 더 이상의 혼란을 피하기 위해 쉼표를 사용하여 특이성 값을 구분하는 것이 좋습니다.

웹마스터 제안: 웹사이트 CSS 설정은 페이지 제어 능력을 반영하며 CSS 상태도 매우 중요합니다. 더 많은 정보, 더 많은 연습, 더 많은 스크립트 홈으로 오세요! 이 사이트가 마음에 드신다면 홍보해주세요! 읽어주셔서 감사합니다