CSS의 의사 클래스와 의사 요소 및 이들 간의 차이점

이 글에서는 주로 CSS의 의사 클래스 와 의사 요소에 대한 자세한 설명과 둘의 차이점을 소개합니다. 실제로 CSS3에서는 간단하고 투박한 방법, 즉 의사 클래스를 사용하여 표준화합니다. -class before 콜론으로 표현하며 의사요소 앞에 콜론 2개를 사용하여 쉽게 혼동되지 않도록 하여

CSS 의사 클래스
CSS 의사 클래스(Pseudoclasses)는 선택기의 볼트로, 선택기 또는 이와 관련된 선택기의 상태를 지정하는 데 사용됩니다. 해당 형식은 selector:pseudoclass{property:value;}입니다. 간단히 영어 반각 콜론(:)을 사용하여 선택기와 의사 클래스를 구분합니다. 많은 CSS 제안이 브라우저에서 지원되지 않지만 사용하기에 안전한 연결을 위한 4가지 CSS 의사 클래스가 있습니다.
1.link는 접속 연결에 사용됩니다.
2.visited는 이미 방문한 연결에 사용됩니다.
3.hover는 마우스 커서가 위치한 연결에 사용됩니다.
4.active는 포커스를 얻는 연결(예: 클릭)에 사용됩니다.
예:

ExampleSourceCode   
a:link{     
color:red
}     
a:visited{     
color:green
}     
a:hover{     
color:blue
}     
a:active{     
color:orange     
}

참고:

CSS를 사용하면 우회를 제어할 수 있지만 다른 색상을 사용하여 액세스된 연결을 표시하는 것은 좋은 습관입니다. 사용자는 여전히 이것을 기대합니다. CSS 의사 클래스(hover 제외)는 일반적으로 사용되지 않으며 과거만큼 일반적으로 사용되지도 않습니다. 그러므로 예전만큼 유용하지 않습니다. 하지만 사용자들의 의견을 모을 수 있다면 활용해야 한다는 것을 알게 될 것입니다.
일반적으로 연결 텍스트는 파란색이고 방문한 연결은 보라색입니다. 아마도 이것이 가장 효과적이고 유용한 색상일 것입니다. 그러나 CSS가 널리 개발되면서 이 색상은 더 이상 흔하지 않으며 사용자는 더 이상 연결이 파란색이나 보라색이어야 한다고 가정하지 않습니다.
연결 외에 다른 요소에도 hover 의사 클래스를 사용할 수 있어야 합니다. 불행하게도 InternetExplore는 이를 지원하지 않습니다. 이것은 정말 큰 성가심입니다.

의사 요소
사실 CSS의 의사 요소는 HTML에 존재하지 않으며 일반적으로 특정 요소의 특수 처리에만 사용됩니다. 일반적으로 사용되는 의사 요소를 사용합니다.
:
:first-line은 p 요소의 첫 번째 줄 스타일을 지정할 수 있습니다.
:
:first -letter p 요소의 첫 번째 단어 스타일을 지정할 수 있습니다
::selection
사용자 강조 표시 효과 정의
:
:before 요소의 Insert content before
:
:afterInsert content after element
예제 HTML

<p>
    臣亮言，先帝創業未半<br>

    每天，天剛亮時，我母親便把我喊醒，叫我披衣坐起。我從不知道她醒來坐了多久了。   
</p>

첫 번째 줄과 첫 글자

/* 第一行樣式 */
p::first-line {   
    color: red;   
}   
/* 開頭第一個字樣式 */
p::first-letter {   
    font-size: 30px;   
}   
selection   
// 反白後的效果   
p::selection {   
    background: red;   
    color: #FFF;   
}   
// Firefox   
p::-moz-selection {   
    background: red;   
    color: #FFF;   
}

의사 클래스와 의사 요소의 차이점 :
먼저 w3c를 읽어보세요. 정의: 1. CSS 의사 클래스는 특정 선택기에 특수 효과를 추가하는 데 사용됩니다.
2.CSS 의사 요소는 특정 선택기에 특수 효과를 추가하는 데 사용됩니다.
두 가지 점을 분명히 할 수 있습니다. 첫 번째는 둘 다 선택기와 관련이 있다는 것이고, 두 번째는 "특별한" 효과를 추가한다는 것입니다. 여기서 특별한 점은 두 가지가 다른 CSS가 설명할 수 없는 것들을 설명한다는 것입니다.
의사 클래스 유형

의사 요소 유형

차이

의사 클래스
를 사용합니다. 여기서는 비교를 위해 first- child 및 pseudo-element:first-letter를 사용합니다.

p>i:first-child {color: red}   
<p>   
    <i>first</i>   
    <i>second</i>   
</p>

//Pseudo-class: first-child 첫 번째 하위 요소에 스타일 추가가상 클래스를 사용하지 않고 달성하려는 경우 위의 효과를 사용하면 다음과 같이 할 수 있습니다:

.first-child {color: red}   
<p>   
    <i class="first-child">first</i>   
    <i>second</i>   
</p>

즉, 첫 번째 하위 요소에 클래스를 추가한 다음 이 클래스의 스타일을 정의합니다. 그런 다음 요소를 살펴보겠습니다.

p:first-letter {color: red}   
<p>I am stephen lee.</p>

//Pseudo-element: first-letter 첫 글자에 스타일 추가 그런 다음 의사 요소를 사용하지 않는 경우 위의 효과를 얻으려면 어떻게 해야 합니까?

.first-letter {color: red}   
<p><span class=&#39;first-letter&#39;>I</span> am stephen lee.</p>

즉, 첫 글자에 스팬(span)을 추가하고, 그 스팬에 스타일을 추가합니다.

둘의 차이점이 나왔습니다. 즉,

의사 클래스의 효과는 실제 클래스를 추가하여 얻을 수 있지만, 의사 요소의 효과는 실제 요소를 추가하여 얻을 수 있습니다. 이것이 바로 그 중 하나를 의사라고 부르는 이유입니다. -class이고 다른 하나는 pseudo-element라고 불리는 이유입니다.

总结
伪元素和伪类之所以这么容易混淆，是因为他们的效果类似而且写法相仿，但实际上 css3 为了区分两者，已经明确规定了伪类用一个冒号来表示，而伪元素则用两个冒号来表示。

:Pseudo-classes   
::Pseudo-elements

但因为兼容性的问题，所以现在大部分还是统一的单冒号，但是抛开兼容性的问题，我们在书写时应该尽可能养成好习惯，区分两者。

위 내용은 CSS의 의사 클래스와 의사 요소 및 이들 간의 차이점의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!