상황이 좋아하는 a:link나 div::after...

차이에 대한 정보가 부족한 것 같습니다.

CSS 3 셀렉터 추천 모두에 대해 매우 분명하다,하지만 난 어쨌든 차이를 보여주기 위해 노력할 것이다.

의사 클래스

공식 설명

의사 클래스 개념은 문서 트리 외부에 있거나 다른 간단한 선택기를 사용하여 표현할 수없는 정보를 기반으로 선택을 허용하기 위해 도입되었습니다.

의사 클래스는 항상 "콜론"( :)과 의사 클래스 이름, 선택적으로 괄호 사이의 값으로 구성됩니다.

의사 클래스는 선택자에 포함 된 모든 단순 선택자 시퀀스에서 허용됩니다. 의사 클래스는 선행 유형 선택자 또는 범용 선택자 (생략 될 수 있음) 뒤의 단순 선택자 시퀀스의 모든 위치에서 허용됩니다. 의사 클래스 이름은 대소 문자를 구분하지 않습니다. 일부 의사 클래스는 상호 배타적 인 반면 다른 일부는 동일한 요소에 동시에 적용될 수 있습니다. 의사 클래스는 사용자가 문서와 상호 작용하는 동안 요소가 의사 클래스를 얻거나 잃을 수 있다는 점에서 동적 일 수 있습니다.

출처

이것은 무엇을 의미 하는가?

의사 클래스의 중요한 특성은 첫 번째 문장에 설명되어 있습니다. "가상 클래스 개념 [...] 허용 선택 " . 이를 통해 스타일 시트 작성자는 "문서 트리 외부에있는" 정보 ( 예 : 링크의 현재 상태 ( :active, :visited))를 기반으로 요소간에 서로 다를 수 있습니다 . 그것들은 DOM 어디에도 저장되지 않으며 이러한 옵션에 액세스 할 수있는 DOM 인터페이스가 없습니다.

반면에 :targetDOM 조작을 통해 액세스 할 수 window.location.hash있지만 (자바 스크립트로 객체를 찾기 위해 사용할 수 있음 ) "다른 간단한 선택기를 사용하여 표현할 수 없습니다" .

따라서 기본적으로 의사 클래스는 선택한 요소 집합을 다른 간단한 선택기 처럼 간단한 선택기의 순서를 . 일련의 단순 선택자에있는 모든 단순 선택자는 동시에 평가됩니다. 의사 클래스의 전체 목록은 CSS3 선택기 권장 사항을 확인하십시오.

예

다음 예제는 모든 짝수 행을 회색 ( #ccc), 5 개 흰색으로 나눌 수없는 모든 고르지 않은 행과 마젠타 행을 모두 채색합니다 .

table tr:nth-child(2n) td{
   background-color: #ccc;
}

table tr:nth-child(2n+1) td{
   background-color: #fff;
}

table tr:nth-child(2n+1):nth-child(5n) td{
   background-color: #f0f;
}

의사 요소

공식 설명

의사 요소는 문서 언어에서 지정한 것 이상으로 문서 트리에 대한 추상화를 만듭니다. 예를 들어, 문서 언어는 요소 콘텐츠의 첫 글자 나 첫 줄에 액세스하는 메커니즘을 제공하지 않습니다. 의사 요소를 사용하면 작성자가 액세스 할 수없는이 정보를 참조 할 수 있습니다. 의사 요소는 소스 문서에 존재하지 않는 콘텐츠를 참조하는 방법을 작성자에게 제공 할 수도 있습니다 (예 : ::before및 ::after의사 요소는 생성 된 콘텐츠에 대한 액세스를 제공합니다).

의사 요소는 두 개의 콜론 ( ::)과 의사 요소의 이름으로 구성됩니다.

이 ::표기법은 의사 클래스와 의사 요소를 구별하기 위해 현재 문서에 도입되었습니다. 기존 스타일 시트와의 호환성을 위해 사용자 에이전트는 CSS 레벨 1 및 2에 도입 된 의사 요소 (즉, : first-line, : first-letter, : before 및 : after)에 대해 이전의 단일 콜론 표기법도 허용해야합니다. 이 사양에 도입 된 새로운 의사 요소에는 이러한 호환성이 허용되지 않습니다.

선택 자당 하나의 의사 요소 만 나타날 수 있으며, 존재하는 경우 선택 자의 주제를 나타내는 단순 선택 자의 시퀀스 뒤에 나타나야합니다.

참고 :이 사양의 향후 버전에서는 선택 자당 여러 의사 요소를 허용 할 수 있습니다.

출처

이것은 무엇을 의미 하는가?

여기서 가장 중요한 부분이다 "의사 요소는 저자가 할 수 [..] 액세스 할 수없는 정보를 참조하십시오 " 하고 그들이 그 ( "또한 저자에게 소스 문서에 존재하지 않는 내용을 참조 할 수있는 방법을 제공 할 수 있습니다 예를 들어, ::before및 ::after의사 요소는 생성 된 콘텐츠에 대한 액세스를 제공합니다 . 가장 큰 차이점은 실제로 규칙과 의사 클래스 선택자가 적용될 수있는 새로운 가상 요소를 생성한다는 것입니다. 요소를 필터링하지 않고 기본적으로 콘텐츠 ( ::first-line,::first-letter )를 하고이를 가상 컨테이너에 포장하여 작성자가 원하는대로 스타일을 지정할 수 있습니다 (음, 거의).

예를 들어 ::first-line의사 요소는 현재 사용되는 글꼴, 글꼴 크기, 요소 너비, 부동 요소 (및 아마도 하루 중 시간)에 크게 의존하기 때문에 JavaScript로 재구성 할 수 없습니다. 글쎄, 그것은 전적으로 사실이 아닙니다. 여전히 모든 값을 계산하고 첫 번째 줄을 추출 할 수 있지만 그렇게하는 것은 매우 성가신 활동입니다.

가장 큰 차이점은 "선택 자당 하나의 의사 요소 만 나타날 수있다"는 것 입니다. 메모는 이것이 변경 될 수 있다고 말하고 있지만, 2012 년 현재 나는 우리가 미래에 다른 행동을 볼 것이라고 생각하지 않습니다 ( 아직 CSS4에 있습니다 ).

예

다음 예제는 의사 클래스 :lang와 의사 요소를 사용하여 주어진 페이지의 모든 인용문에 언어 태그를 추가합니다 ::after.

q:lang(de)::after{
    content: " (German) ";
}

q:lang(en)::after{
    content: " (English) ";
}

q:lang(fr)::after{
    content: " (French) ";
}

q:not(:lang(fr)):not(:lang(de)):not(:lang(en))::after{
    content: " (Unrecognized language) ";
}

TL; DR

의사 클래스는 일련의 선택기에서 간단한 선택기 역할을하므로 비 표현 적 특성에 대한 요소를 분류하고 의사 요소는 새로운 가상 요소를 만듭니다.

참고 문헌

W3C

• 선택기 수준 3
  • 4. 선택기 구문
  • 6.6 의사 클래스
  • 7. 의사 요소
• CSS 2.1 사양 (구식이지만 여전히 유익 함)
  • 5.2 선택기 구문 :

    단순 선택기는 유형 선택기 또는 범용 선택기이고 그 뒤에 임의의 순서로 0 개 이상의 속성 선택기, ID 선택기 또는 의사 클래스가 바로 뒤 따릅니다. 모든 구성 요소가 일치하면 단순 선택기가 일치합니다.

  • 5.10 의사 요소와 의사 클래스

의사 클래스는 기존 요소를 필터링합니다.
a:link모든 의미 <a>있는들 :link.

의사 요소는 새로운 가짜 요소입니다. s
div::after뒤에 존재하지 않는 요소를 의미합니다 <div>.

::selection유사 요소의 또 다른 예입니다.
선택된 모든 요소를 ​​의미하지는 않습니다. 선택한 콘텐츠의 범위를 의미하며 여러 요소의 일부에 걸쳐있을 수 있습니다.

차이점을 이해하는 데 도움이되는 간단한 설명 :

• 의사 클래스는 특별한 상태를 설명합니다.
• 의사 요소는 가상 요소와 일치합니다.

Sitepoint 문서에서 :

의사 클래스는 HTML의 클래스와 비슷하지만이 마크 업에 명시 적으로 지정 아니에요. 일부 의사 클래스는 동적이며 문서와 사용자 상호 작용의 결과로 적용됩니다. -http : //reference.sitepoint.com/css/pseudoclasses . 이것들은 :hover, :active, :visited.

의사 요소 는 문서 트리에 명시 적으로 존재하지 않는 가상 요소 와 일치합니다. 가상 요소는 예를 들어 브라우저 창의 너비가 변경 될 때 나타내는 가상 요소가 변경 될 수 있으므로 동적 일 수 있습니다. CSS 규칙에 의해 생성 된 콘텐츠를 나타낼 수도 있습니다. -http : //reference.sitepoint.com/css/pseudoelements . 이것들은 before, :after, :first-letter.

다음은 간단한 대답입니다.

요소 의 상태 에 따라 CSS를 적용해야 할 때 의사 클래스를 사용 합니다. 예 :

1. 앵커 요소 ( :hover) 를 가리키면 CSS 적용
2. html 요소 ( :focus) 에 초점이 맞춰지면 CSS를 적용 합니다. 기타

요소 의 특정 부분 이나 새로 삽입 된 콘텐츠에 CSS를 적용해야 할 때 의사 요소를 사용 합니다 . 예 :

1. 요소의 첫 번째 문자 또는 첫 번째 줄에 CSS를 적용합니다 ( ::first-letter).
2. 요소의 내용 앞 또는 뒤에 내용 삽입 ( ::before, ::after)

다음은 둘 다의 예입니다.

<html>

 <head>
   <style>
   p::first-letter {  /* pseudo-element */
     color: #ff0000;
   }

   a:hover {          /* pseudo-class */
     color: red;      
   }
   </style>
 </head>

 <body>
   <a href="#" >This is a link</a>
   <p>This is a paragraph.</p>
 </body>

</html>

개념적 대답 :

• 의사 요소는 문서의 일부인 것을 참조하지만 아직 알지 못합니다. 예를 들어 첫 글자. 텍스트 만 받기 전에. 이제 타겟팅 할 수있는 첫 글자가 있습니다. 새로운 개념이지만 항상 문서의 일부였습니다. 여기에는 다음과 같은 것도 포함됩니다 ::before. 실제 내용은 없지만 다른 것 이전의 개념은 항상 존재했습니다. 이제이를 지정하고 있습니다.

• 의사 클래스는 DOM의 상태입니다. 클래스가 요소와 연결되는 태그 인 것처럼 의사 클래스는 일반적으로 상태 변경에 대한 응답으로 브라우저 나 DOM 또는 기타 항목에 의해 연결되는 클래스입니다. 사용자가 링크를 방문 할 때 해당 링크는 '방문 함'상태가 될 수 있습니다. Anchor 요소에 'visited'클래스를 적용하는 브라우저를 상상할 수 있습니다. :visited그러면 해당 의사 클래스를 선택하는 방법이됩니다.

의사 클래스

의사 클래스는 원칙적으로 HTML 문서 트리 자체와 해당 요소 또는 이름, 속성 또는 내용과 같은 특성이 아니라 언어 인코딩 또는 동적 상태와 같은 기타 가상 조건을 기반으로 HTML 문서의 특정 부분을 선택하는 방법입니다. 요소의.

원래 의사 클래스는 시간이 지남에 따라 또는 사용자 개입을 통해 들어오고 나가는 요소의 동적 상태를 정의했습니다. CSS2는 가상 개념 문서 구성 요소 또는 문서 트리의 추론 된 부분 (예 : 첫 번째 하위)을 포함하도록이 개념을 확장했습니다. 가상 클래스는 다양한 요소에 팬텀 클래스가 추가 된 것처럼 작동합니다.

제한 사항 : 의사 요소와 달리 의사 클래스는 선택기 체인의 모든 위치에 나타날 수 있습니다.

의사 클래스 코드의 예 :

a:link /* This selects any "a" element whose target has not been visited.*/
{
padding : 4px;
text-decoration : none;
width : 10%;
color : #000000; /* black text color */
background-color : #99FF99; /* set to a pastel green */
border-top : 2px solid #ccffcc; /* highlight color */
border-left : 2px solid #ccffcc; /* highlight color */
border-bottom : 2px solid #003300; /* shadow color */
border-right : 2px solid #003300; /* shadow color */
}

a:visited /* This selects any "a" element whose target has been visited.*/
{ padding : 4px;
text-decoration : none;
color : #000000; /* black text color */
background-color : #ccccff; /* set to a lavender */
border-top : 2px solid #ffffff; /* highlight color */
border-left : 2px solid #ffffff; /* highlight color */
border-bottom : 2px solid #333366; /* shadow color *
border-right : 2px solid #333366; /* shadow color */
}

a:hover /* This selects any "a" element which is in a hover state. This is a state during pointer movement within the rendering region of an element. The user designates an element but does not activate it. */
{
color : #000000; /* black text color */
background-color : #99cc99; /* desaturated color */
border-top : 2px solid #003300; /* shadow color */
border-left : 2px solid #003300; /* shadow color */
border-bottom : 2px solid #ccffcc; /* highlight color */
border-right : 2px solid #ccffcc; /* highlight color */
}

a:focus /* This selects any "a" element which currently has focus. Focus is a state during which an element accepts keyboard input or other forms of text input. */
{
padding : 4px;
text-decoration : none;
width : 10%;
color : #000000; /* black text color */
background-color : #ffff99; /* set to a pastel yellow */
border-top : 2px solid #ffffcc; /* highlight color */
border-left : 2px solid #ffffcc; /* highlight color */
border-bottom : 2px solid #666633; /* shadow color */
border-right : 2px solid #666633; /* shadow color */
}

a:active /* This selects any "a" element which is in a state of activation. Active is a state during pointer activation (eg: press and release of a mouse) within the rendering region of an element.*/
{
padding : 4px;
text-decoration : none;
width : 10%;
color : #000000; /* black text color */
background-color : #ff99ff; /* set to a pink */
border-top : 2px solid #ffccff; /* highlight color */
border-left : 2px solid #ffccff; /* highlight color */
border-bottom : 2px solid #663366; /* shadow color */
border-right : 2px solid #663366; /* shadow color */
}

위의 의사 클래스 코드의 렌더링을 보여주는 페이지

의사 요소

PSEUDO-ELEMENTS는 요소의 하위 부분을 처리하는 데 사용됩니다. 문서에 지정된 것 이상으로 요소 콘텐츠의 일부에 스타일을 설정할 수 있습니다. 즉, 실제로 문서 요소 트리에없는 논리적 요소를 정의 할 수 있습니다. 논리적 요소를 사용하면 암시 적 의미 구조를 CSS 선택자에서 처리 할 수 ​​있습니다.

제한 사항 : 의사 요소는 인라인 스타일이 아닌 외부 및 문서 수준 컨텍스트에만 적용 할 수 있습니다. 의사 요소는 규칙에 나타날 수있는 위치로 제한됩니다. 선택자 체인의 끝 (선택자 주제 뒤)에만 나타날 수 있습니다. 선택기에서 찾은 클래스 또는 ID 이름 뒤에 와야합니다. 선택 자당 하나의 유사 요소 만 지정할 수 있습니다. 단일 요소 구조에서 여러 의사 요소를 처리하려면 여러 스타일 선택기 / 선언문을 작성해야합니다.

의사 요소는 초기 대문자 및 드롭 캡과 같은 일반적인 인쇄 효과에 사용할 수 있습니다. 또한 소스 문서에없는 생성 된 콘텐츠 ( "이전"및 "이후"포함)를 처리 할 수 ​​있습니다. 속성 및 값이 추가 된 일부 의사 요소의 스타일 시트 예제는 다음과 같습니다.

/ * 다음 규칙은 제목 1의 첫 글자를 선택하고 글꼴을 2em, 필기체, 녹색 배경으로 설정합니다. 첫 글자는 블록 수준 요소에 대해 첫 번째로 렌더링 된 글자 / 문자를 선택합니다. * /

h1:first-letter {
font-size : 2em;
font-family : "Lucida Handwriting", "Lucida Sans", "Lucida Console", cursive;
background-color : #ccffcc;
}

/* The following rule selects the first displayed line in a paragraph and makes it bold. First-line selects the first rendered line on the output device of a block-level element. */

p:first-line {
font-weight : bold;
}

/* The following rule selects any content placed before a blockquote and inserts the phrase "Quote of the day:" in bold small caps with a green background. */

blockquote:before {
content : "Quote of the day:";
background-color : #ccffcc;
font-weight : bold;
font-variant : small-caps;
}

/* The following rule selects any content placed before a "q" element and inserts the smart open quote. */

q:before {
content : open-quote;
}

/* The following rule selects any content placed after a "q" element and inserts the smart close quote. */

q:after{
content : close-quote;
}

출처 : 링크

간단히 말해서 MDN의 의사 클래스 에서 :

CSS 의사 클래스 는 선택한 요소의 특수 상태를 지정하는 선택기에 추가되는 키워드입니다. 예를 들어 :hover 는 사용자가 버튼 위로 마우스를 가져갈 때 스타일을 적용하는 데 사용할 수 있습니다.

div : hover {
  배경색 : # F89B4D;
}

그리고 MDN의 의사 요소 에서 :

CSS 의사 요소 는 선택한 요소의 특정 부분에 스타일을 지정할 수 있도록 선택기에 추가 된 키워드입니다. 예를 들어 ::first-line단락의 첫 줄에 스타일을 지정하는 데 사용할 수 있습니다.

/ * 모든 <p> 요소의 첫 번째 줄. * /
p :: first-line {
 파란색;
 텍스트 변환 : 대문자;
}