CSS에서 의사 클래스와 의사 요소를 사용하는 방법
의사 클래스는 링크 및 호버와 같은 방법을 통해 선택기에 특수 효과를 추가할 수 있습니다. 의사 요소는 첫 번째 줄 스타일을 추가하고 :first-letter를 사용하여 첫 글자를 추가합니다. 두 가지 측면을 자세히
Pseudo-class
시간 경과에 따라 또는 사용자 개입을 통해 요소에 들어가거나 나갈 때 요소의 동적 상태를 나타내는 HTML 문서의 특정 부분을 선택하는 방법입니다. 이는 HTML 문서 트리 자체와 해당 요소 또는 속성에 속하지 않습니다. 실제로 CSS 의사 클래스는 선택기의 일부 특수 효과를 추가하는 데 사용됩니다. 의사 요소와 달리 의사 클래스는 선택기 체인의 어느 곳에나 나타날 수 있습니다.
예a: 링크는 방문하지 않은 링크를 나타냅니다.
<style>
a:link{
background-color: pink;
}
a: 방문은 방문한 링크를 나타냅니다.
a :마우스로 가리키면 링크로 이동할 수 있습니다. 
a:visited{
background-color: pink;
}a:hover는 a:link 및 a:visited 뒤에 위치해야 적용됩니다!
a:hover{
background-color: pink;
}활성은 마우스를 올린 후에 사용해야 적용됩니다.
의사 요소
의사 요소는 특정 선택기를 설정하는 데 사용됩니다. 특수 효과는 인라인 스타일이 아닌 외부 및 문서 수준 컨텍스트에만 적용할 수 있습니다. 선택기 체인의 끝에만 나타날 수 있으며 각 선택기는 의사 요소를 하나만 지정할 수 있습니다. 단일 요소 구조에서 여러 의사 요소를 처리하려면 여러 스타일 선택기 또는 선언문을 만들어야 합니다.
: 첫 번째 줄 의사 요소는 텍스트의 첫 번째 줄에 특수 스타일을 설정하는 데 사용되며 블록 수준 요소에만 사용할 수 있습니다. 다음 속성 글꼴, 색상, 배경을 수정할 수 있습니다. 단어 간격, 문자 간격 등
a:hover{
background-color: pink;
}
a:active{
background-color: pink;
}: 첫 글자 의사 요소 
는 텍스트의 첫 글자에 특수 스타일을 설정하는 데 사용됩니다. 글꼴, 색상, 배경, 여백, 패딩, 테두리를 수정할 수 있습니다.
p:first-line
{
color: pink;
font-variant: small-caps;/*改为大写*/
}
</style>
</head>
<body>
<p>
you are very good!
</p>와 같은 속성은 첫 글자에만 적용됩니다.
위 내용은 CSS에서 의사 클래스와 의사 요소를 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
핫 AI 도구
Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱
AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.
Undress AI Tool
무료로 이미지를 벗다
Clothoff.io
AI 옷 제거제
AI Hentai Generator
AI Hentai를 무료로 생성하십시오.
인기 기사
뜨거운 도구
메모장++7.3.1
사용하기 쉬운 무료 코드 편집기
SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.
스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경
드림위버 CS6
시각적 웹 개발 도구
SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)
뜨거운 주제
7485
15
1377
52
77
11
51
19
19
38
의사 요소가 실패하는 이유는 무엇입니까?
Nov 21, 2023 pm 05:13 PM
의사 요소가 실패하는 이유: 1. 선택기 문제 3. 상속 문제 5. 브라우저 호환성 문제 자세한 소개: 1. 선택기 문제, 의사 요소의 선택기가 올바르지 않아 대상 요소를 선택할 수 없습니다. 2. 스타일 충돌, CSS에 스타일 충돌이 있으면 의사 요소가 유효하지 않게 될 수 있습니다. 3. 상속 문제, 의사 요소는 특정 스타일 속성을 상속하지 못할 수 있습니다. 4. CSS에 구문 오류가 있으면 의사 요소가 유효하지 않게 될 수 있습니다.
위치가 3보다 크거나 같은 하위 요소의 스타일을 선택하려면 :nth-child(n+3) 의사 클래스 선택기를 사용하십시오.
Nov 20, 2023 am 11:20 AM
:nth-child(n+3) 의사 클래스 선택기를 사용하여 위치가 3보다 크거나 같은 하위 요소의 스타일을 선택합니다. 구체적인 코드 예는 다음과 같습니다. HTML 코드: <divid="container" ><divclass="item">첫 번째 하위 요소</div><divclass="item"&
CSS::placeholder 의사 요소 선택기의 다양한 애플리케이션 시나리오 구현
Nov 20, 2023 pm 03:17 PM
CSS::placeholder 의사 요소 선택기의 여러 애플리케이션 시나리오를 구현하려면 특정 코드 예제가 필요합니다. 웹 개발에서 CSS는 웹 페이지의 레이아웃과 스타일을 제어하는 데 일반적으로 사용되는 스타일 시트 언어입니다. ::placeholder 의사 요소 선택기는 CSS3의 새로운 선택기로, 입력 상자(텍스트 입력 상자, 비밀번호 입력 상자 등 포함)의 자리 표시자 스타일을 수정하는 데 사용됩니다. 아래에서는 다양한 애플리케이션 시나리오를 소개하고 해당 코드 예제를 제공합니다. 입력 상자 자리 표시자의 색상을 수정합니다.
CSS 의사 선택기 학습 의사 클래스 선택기 분석
Aug 03, 2022 am 11:26 AM
이전 글 "Css 의사 선택자 학습 - 의사 요소 선택자 분석"에서 의사 요소 선택자에 대해 배웠고, 오늘은 의사 클래스 선택자에 대해 자세히 살펴보는 것이 모든 분들께 도움이 되기를 바랍니다.
hover가 의사 요소인 이유
Oct 09, 2023 pm 05:45 PM
Hover는 의사 요소가 아니라 의사 클래스입니다. 의사 클래스는 요소의 특정 상태나 동작을 선택하는 데 사용되는 반면, 의사 요소는 요소의 특정 부분에 스타일을 추가하는 데 사용됩니다. :hover는 요소의 특정 부분에 스타일을 추가하는 대신 요소의 특정 상태를 선택하는 데 사용되므로 :hover 의사 클래스를 사용하여 요소의 마우스 오버 상태 스타일을 지정할 수 있으며 다음을 사용할 수 있습니다. 링크에 호버 효과를 추가하는 hover 의사 클래스. 링크 위에 마우스를 올리면 링크의 색상, 배경색 등이 변경될 수 있습니다.
:active 의사 클래스 선택기를 사용하여 마우스 클릭 효과를 위한 CSS 스타일 구현
Nov 20, 2023 am 09:26 AM
마우스 클릭 효과를 얻기 위해 :active 의사 클래스 선택기를 사용하는 CSS 스타일 CSS는 웹 페이지의 성능과 스타일을 설명하는 데 사용되는 계단식 스타일 시트 언어입니다. :active는 마우스를 클릭할 때 요소의 상태를 선택하는 데 사용되는 CSS의 의사 클래스 선택기입니다. :active 의사 클래스 선택기를 사용하면 클릭한 요소에 특정 스타일을 추가하여 마우스 클릭 효과를 얻을 수 있습니다. 다음은 :active 의사 클래스 선택기를 사용하여 마우스 클릭 효과를 얻는 방법을 보여주는 간단한 샘플 코드입니다.
CSS 의사 클래스 및 의사 요소의 기본 개념과 사용 시나리오를 살펴보세요.
Dec 23, 2023 pm 01:21 PM
CSS 의사 클래스 및 의사 요소의 기본 개념과 응용 시나리오를 이해합니다. CSS(CascadingStyleSheets)는 웹 페이지의 스타일을 설명하는 데 사용되는 마크업 언어입니다. 웹 페이지에서 요소의 모양과 레이아웃을 제어할 수 있습니다. CSS에서 의사 클래스와 의사 요소는 CSS의 적용 범위와 유연성을 더욱 확장할 수 있는 매우 유용한 기능입니다. 1. 의사 클래스 의사 클래스는 특정 상태 요소를 선택하는 데 사용되는 키워드입니다. 일반적인 의사 클래스에는 hover, active, focus 등이 포함됩니다. 다음은 몇 가지 일반적인 사항입니다.
의사 요소를 추가하면 무슨 소용이 있나요?
Oct 09, 2023 pm 05:45 PM
의사 요소를 사용하여 장식 효과를 만들고, 특정 레이아웃 효과를 얻고, 대화형 효과를 만들고, 특정 요소 상태를 수정하고, 일부 특수 효과를 만들 수 있습니다. 자세한 소개: 1. 장식 효과 만들기 :before 또는 :after 의사 요소의 콘텐츠 속성과 스타일을 설정하면 요소 앞이나 뒤에 아이콘, 모양 또는 기타 장식 요소를 삽입하여 더 많은 요소를 추가할 수 있습니다. 2. :before 및 :after 의사 요소 등을 통해 생성할 수 있는 특정 레이아웃 효과를 얻습니다.
