하이퍼커넥션_HTML/Xhtml_웹페이지 제작의 4가지 상태 적용에 대한 자세한 설명

가능한 원인이 브라우저 문제라고 생각하더라도 스타일 정의 순서가 잘못되었을 가능성이 높습니다. 다양한 상태의 연결 스타일을 보려면 올바른 스타일 순서는 다음과 같아야 합니다.

" 링크 - 방문 - 마우스오버 - 활성 " 또는 " LVHA "(약어).

핵심 콘텐츠:

각 선택자 선택자는 "특정성"을 갖습니다. 두 개의 선택자가 동일한 요소에 적용되면 특이성이 더 높은 선택자가 우선권을 갖습니다. 예:

P.hire {color: green;} /* 특이성 = 1,1 */P {color: red;} /* 특이성 = 1 */

class=hihere가 포함된 모든 단락 콘텐츠는 빨간색 대신 녹색으로 표시됩니다. 두 선택자 모두 색상을 설정하지만 더 높은 특이성을 가진 선택자가 승리합니다.

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

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:링크A:방문A:hoverA:활성

실제로 하이퍼링크는 '방문하지 않음' 상태와 '방문함' 상태를 동시에 가질 수 없기 때문에 처음 두 스타일의 순서가 바뀔 수 있습니다. ( :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 */

간단한 십진수 기반 연산인 것 같습니다. 그러나 10진수 알고리즘을 사용하여 "특이성"을 계산할 수는 없습니다. 예를 들어 15개의 선택기를 함께 사용하면 해당 "특이성" 가중치는 여전히 단순 클래스 선택기의 가중치보다 낮습니다. 예:

.hello {color: red;} /* 특이성 = 10 */HTML BODY DIV UL LI OL LI UL LI OL LI UL LI OL LI (color: green;} /* 특이성 = 15 */

" 10 "은 실제로 "1" 뒤에 "0"이 오는 것이지 "10"이 아닙니다. 다음과 같이 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 상태도 매우 중요합니다. 더 많은 정보를 읽고, 더 많이 연습하고, 더 많은 스크립트 홈으로 오세요! 이 사이트가 마음에 드신다면 홍보해주세요! 읽어주셔서 감사합니다.