CSS 의사 클래스란 무엇입니까? CSS 의사 클래스에 대한 간략한 소개(예제 포함)
- 不言원래의
- 2018-11-02 10:08:083246검색
CSS 의사 클래스를 사용하면 요소에 특정 상태를 할당할 수 있습니다. 예를 들어, 사용자가 웹페이지의 이미지 위로 마우스를 가져가면 해당 이미지가 다른 이미지로 변경됩니다. 링크는 방문한 후 색상이 변경되어 방문하지 않은 링크와 구별할 수 있습니다. 양식의 입력 상자가 비활성화되고 값이 없습니다. 의사 클래스는 이러한 작업 등을 구현할 수 있습니다. 일반 CSS 클래스는 의사 클래스와 함께 사용할 수도 있습니다.
CSS3은 이전에 CSS2에서 사용할 수 있었던 것보다 더 많은 의사 클래스를 추가합니다. (추천 과정: css3 비디오 튜토리얼)
의사 클래스가 선택기에 추가되며 앞에 콜론이 오고 그 뒤에 대괄호 값이 있는 속성이 옵니다. 의사 클래스의 구문은 다음과 같습니다
selector: pseudo-class { property:value;}기본 의사 클래스
다양한 의사 클래스가 있으며 다음 코드 예제는 가장 기본적인 의사 클래스 중 일부를 보여줍니다. 이는 사용자 작업으로 인해 변경되는 동적 의사 클래스로 분류됩니다. 코드 예제에서 :link 의사 클래스는 링크 색상을 파란색으로 설정하는 데 사용됩니다. 사용자가 링크를 방문하면 :visited 의사 클래스를 사용하여 링크 색상을 적갈색으로 변경합니다. 또한 설명: 사용자가 이미지 위로 마우스를 가져가면 마우스 오버를 사용하여 흰색 텍스트가 있는 보라색 원을 노란색 텍스트가 있는 분홍색 사각형으로 변경합니다. :Focus 의사 클래스는 사용자가 클릭하거나 "초점을 맞추면" 날짜 입력 필드를 회색으로 변경합니다. 코드 샘플은 여기에 있습니다. 직접 사용해 보세요!
<!DOCTYPE html>
<html>
<head>
<style>
a:link{
color:blue;
}
a:visited{
color:maroon;
}
div {
background-color: purple;
color: white;
line-height:90px;
font-size:20px;
text-align:center;
width:200px;
height:200px;
-moz-border-radius: 100px;
-webkit-border-radius: 100px;
border-radius: 100px;
}
div:hover {
background-color:pink;
color:yellow;
width:200px;
height:200px;
-moz-border-radius: 0px;
-webkit-border-radius: 0px;
border-radius: 0px;
}
input:focus {
background-color: lightgray;
}
</style>
</head>
<body>
<p><b><a href="https://www.php.cn/" target="_blank">Click on this link!</a></b></p>
<div>Hover over this</div>
<p><b>Enter todays date in the field below</b></p>
<form>
Date: <input type="text" name="Date"><br>
</form>
</body>
</html>좀 더 많은 의사 클래스
더 일반적으로 사용되는 의사 클래스 중 일부는 다음과 같습니다. 모든 의사 클래스의 전체 목록은 여기에서 찾을 수 있습니다.
: first-child - 이 클래스를 사용하면 상위 요소의 첫 번째 하위 요소에 특정 스타일을 추가할 수 있습니다.
:root- 이 의사 클래스는 문서의 루트 요소를 일치시키는 데 사용됩니다.
: lang- 언어마다 규칙과 규칙이 다릅니다. 때로는 여러 언어로 사용할 수 있는 페이지를 만들어야 하는 경우도 있습니다. :lang 가상 클래스는 이런 상황에 유용합니다. 주로 lang="" HTML 속성과 e8e496c15ba93d81f6ea4fe5f55a2244 요소를 살펴보고 그에 따라 요소를 일치시킵니다.
: 비활성화됨 - 텍스트 필드 및 버튼과 같은 비활성화된 입력 요소를 나타낼 수 있습니다.
: 전체 화면 - 이 의사 클래스는 전체 화면 모드에서 요소를 사용합니다.
의사 요소
의사 요소는 CSS로 스타일을 지정하고 사용자 에이전트로 추가할 수 있다는 점에서 의사 클래스와 기능이 유사합니다. 그러나 DOM에 존재하지 않는 요소를 사용할 수 있다는 점에서 의사 클래스와 다릅니다. 의사 요소의 구문 식별자는 일반적으로 의사 클래스와 같은 단일 콜론이 아닌 이중 콜론입니다. 일반적인 의사 요소는 ::before , ::after 및 ::first-line 입니다. 일부 코더는 단일 콜론을 사용한다는 점에 유의하는 것이 중요합니다. 의사 요소의 경우 이는 CSS2의 관례입니다. 의사 클래스와 의사 요소 간의 혼동을 피하기 위해 이 점을 명심하십시오.
마지막으로
의사 클래스를 사용하면 특수 상태를 요소에 적용할 수 있습니다. 이를 통해 개발자는 JavaScript와 같은 스크립팅 언어를 사용하지 않고도 멋진 효과를 만들 수 있습니다. 코드를 단순하게 유지하면서 페이지를 보다 대화형이고 흥미롭게 만들 수 있는 다양한 유형의 의사 클래스가 있습니다.
위 내용은 CSS 의사 클래스란 무엇입니까? CSS 의사 클래스에 대한 간략한 소개(예제 포함)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!