위류와 위원소

위류: 위류 선택 원소는 현재 원소가 있는 상태, 또는 원소가 현재 가지고 있는 특성을 바탕으로 하는 것이지 원소의 id,class, 속성 등 정적 표지가 아니다.상태는 동적 변화이기 때문에 하나의 원소가 특정한 상태에 도달할 때 위류의 양식을 얻을 수 있다.상태가 바뀌면, 그것은 또 이 스타일을 잃게 될 것이다.이를 통해 알 수 있듯이 그의 기능은class와 약간 유사하지만 문서 이외의 추상적인 것을 바탕으로 위조류라고 부른다.first-child:link:visitive:hover:active:focus:lang 위조 요소: 위조가 특수한 상태를 겨냥한 요소와 달리 위조 요소는 원소 중의 특정한 내용을 조작하는 것으로 위조보다 조작하는 차원이 한 층 더 깊기 때문에 그의 동태성은 위조보다 훨씬 낮다.실제로 위조 요소를 설계하는 목적은 요소 내용의 첫 글자(모), 첫 줄을 선택하고 일부 내용의 앞이나 뒤와 같은 일반적인 선택기가 완성할 수 없는 작업을 선택하는 것이다.이 컨트롤의 컨텐트는 실제로 요소와 동일하지만 그 자체는 요소의 추상화를 기반으로 하고 문서에 존재하지 않기 때문에 위조 요소라고 합니다.first-line first-letter :before :after :링크 위조 클래스는 접근되지 않은 링크에 적용됩니다: visited와 상호 배척됩니다.hover 위조 클래스는 마우스 포인터가 있는 요소에 적용됩니다.:active 위조 클래스는 클릭한 링크, 눌린 단추 등 활성화된 요소에 적용됩니다.visited 위조 클래스는 방문한 링크에 적용됩니다.: 링크와 상호 배척됩니다.focus 위조 클래스는 키보드 입력 포커스가 있는 요소에 적용됩니다.:first-child 위류는 요소가 페이지에 처음 나타날 때 적용됩니다.:lang 위조 클래스는 요소에 지정된 lang이 있는 경우에 적용됩니다.:first-letter 위조 요소의 스타일은 요소 텍스트의 첫 번째 글자(모)에 적용됩니다.first-line 위조 요소의 스타일이 요소 텍스트의 첫 번째 행에 적용됩니다.:before는 요소 컨텐트의 맨 앞에 새 컨텐트를 추가합니다.after는 요소 내용의 맨 뒤에 새 내용을 추가합니다.
CSS에는 위류라고 불리는 특수한 속성이 존재하는데 그 중에서 가장 자주 사용하는 것은 링크를 정의하는 위:link,:visited,:hover,:active 등이다.그것들을 제외하고는 자주 사용되지 않는 위조류도 있다. 예를 들어focus,:first-child,:lang 등이 있다.그리고 CSS에는 위류뿐만 아니라 위원소도 있다. 예를 들어:first-letter,:first-line,:before와:after.    ?본고에서 다른 위조원소는 잠시 표명하지 않고 단지 애프터 위조원소라고 말한다.after는 말 그대로 원소 뒤에 있다는 뜻이고 실질은 원소 뒤에 내용을 추가하는 것이다.이 위조 요소는 제작진이 원소 내용의 맨 뒤에 생성 내용을 삽입할 수 있도록 하고 콘텐츠 속성과 함께 사용하며 대상 뒤에 발생하는 내용을 설정해야 한다.기본적으로 이 위조 요소는 inline 줄 안의 요소이지만 속성 디스플레이를 사용하여 변경할 수 있습니다.모든 주류 브라우저는 after 위조 요소를 지원하지만 IE의 경우 IE8 이상 버전만 지원합니다.다음 예제에서는 CSS 코드에 삽입합니다.

<style type="text/css"> h1:after {content:url(logo.gif)} </style> 
<h1>    </h1>

표시할 때 제목 내용 뒤에 그림을 삽입합니다.이것이 바로 위조원소:애프터의 작용이다.
: 애프터 위조 콘텐츠는 다른 매개 변수와 함께
1: 문자열 예:

1 <style type="text/css"> 2 .test:after{content:"    "}; 3 </style> 4 <div class="test">  div：</div>

실행 결과: div 테스트: 코드 테스트
2:attr(x),attr는 속성의 뜻으로 말 그대로 이 노드의 속성을 읽는 것이다. 예를 들어 다음과 같다.

1 <style type="text/css"> 2 .test:after{content:attr(id)}; 3 </style> 4 <div class="test" id="aaa">  div id ：</div>

실행 결과: div 테스트 id: aaa
3: 고정 매개변수
close-quote:quotes 속성의 뒤에 태그 삽입
no-close-quote:quotes 속성의 뒷표시를 삽입하지 않습니다.하지만 중첩 레벨 증가
open-quote:quotes 속성의 앞 태그 삽입
no-open-quote:quotes 속성의 앞 표시를 삽입하지 않습니다.그러나 네스트된 레벨은 줄어듭니다.