의사 클래스 및 의사 요소는 문서 구조와 독립적입니다. 요소를 얻는 방식은 id, class, 속성 등 기본 요소 특성을 기반으로 하지 않고 특수 상태. 또는 요소(의사 요소)의 특수 콘텐츠입니다. 차이점은 다음과 같이 요약됩니다.
CSS伪类 (Pseudo-classes):用于向某些选择器添加特殊的效果,即在元素当前静态样式的基础上添加特殊效果(一般都是动态效果),所以一个元素达到一个特定状态时,它可能得到一个伪类的样式;当状态改变时,它又会失去这个样式。
속성 | 설명 | ||||||||||||||||
:active | 활성화된 요소 스타일 추가 | ||||||||||||||||
:focus
|
키보드 입력 포커스가 있는 요소에 스타일 추가 | ||||||||||||||||
:hover | 마우스를 요소 위로 가져갈 때 요소에 스타일 추가 | ||||||||||||||||
:link | 방문하지 않은 링크에 스타일 추가 | ||||||||||||||||
:visited | 방문한 링크에 추가 스타일 | ||||||||||||||||
:첫 번째 자식 | 요소의 첫 번째 하위 요소에 스타일 추가 | ||||||||||||||||
:lang | 지정된 lang 속성을 사용하여 요소에 스타일 추가 |
备注:在 CSS 定义中,同一个元素的 :hover 必须位于 :link、:visited 之后才能生效,:active 必须位于 :hover 之后才能生效。
属性 | 描述 |
:first-letter | 向文本的第一个字母添加特殊样式 |
:first-line | 向文本的首行添加特殊样式 |
:before | 在元素之前添加内容 |
:after | 在元素之后添加内容 |
는 특정 선택자에 특수 효과를 설정하는 데 사용됩니다. <a href="http://www.php.cn/wiki/1550.html" target="_blank">w3c</a>
Pseudo-class보다 연산 수준이 깊기 때문에 동적인 것보다 더 나쁩니다. 의사 클래스
속성 | 설명 |
:first-letter | 텍스트의 첫 글자에 특수 스타일 추가 / td> |
:첫 번째 줄 | 텍스트의 첫 번째 줄에 특수 스타일 추가 |
:beforeCSS |
요소 앞에 콘텐츠 추가 |
:after | 요소 뒤에 콘텐츠 추가 |
<a href="http://www.php.cn/wiki/1550.html" target="_blank">w3c<li></a>
둘의 정의: CSS
:first-child
:first-letter
의사 요소는 특정 선택기에 특수 효과를 추가하는 데 사용됩니다.
:first-child
차이
여기서는 비교를 위해 의사 클래스
와 의사 요소를 사용합니다. ::first-letter
p>i:first-child {color: red}<p> <i>first</i> <i>second</i></p>
의사 클래스를 사용하지 않고 위의 효과를 얻으려면 다음과 같이 하면 됩니다. span
.first-child {color: red}<p> <i class="first-child">first</i> <i>second</i></p>
span
즉, 첫 번째 하위 요소에 클래스를 추가한 다음 이 클래스의 스타일을 정의합니다. 그런 다음 의사 요소를 살펴보겠습니다. p::first-letter {color: red}<p>I am stephen lee.</p>//의사 요소
첫 글자에 스타일 추가에 스타일을 추가한다는 의미입니다.그렇다면 의사 요소를 사용하지 않으면 어떻게 해야 할까요? 위의 효과를 얻으려면?
를 추가하고.first-letter {color: red}<p><span class='first-letter'>I</span> am stephen lee.</p>는 첫 글자에
css3
:Pseudo-classes ::Pseudo-elements그러나 호환성 문제로 인해 대부분은 여전히 단일 콜론을 사용합니다. 그러나 호환성 문제와 상관없이 글을 쓸 때 좋은 습관을 기르고 둘을 구별하도록 최선을 다해야 합니다.
위 내용은 CSS 의사 클래스와 의사 요소의 차이점의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!