CSS 의사 클래스
CSS 의사 클래스 선택기는 몇 가지 특수 효과를 추가하는 데 사용됩니다.
문법
의사 클래스 구문 :
CSS 클래스는 또한 의사 클래스를 사용할 수 있습니다 :
앵커 의사 클래스
브라우저는 CSS를 지원 링크의 상이한 상태는 상이한 방식으로 표시 될 수있다
예
a:visited {color:#00FF00;} /* 已访问的链接 */
a:hover {color:#FF00FF;} /* 鼠标划过链接 */
a:active {color:#0000FF;} /* 已选中的链接 */
»시도
주의 : CSS 정의가, A : 링크와 : 호버가에 위치해야합니다 후 방문 효과적이다.
참고 : CSS 정의가, A : 활성가에 위치해야합니다 : 호버 후, 효과가.
참고 : 가상 클래스의이름은 대소 문자를 구분하지 않습니다.
의사 클래스와 CSS 클래스
가상 클래스는 CSS 클래스와 함께 사용될 수있다
<a class="red" href="css-syntax.html"> CSS 구문 </a>를
예를 들어 위의 링크를 방문 한 경우에는 빨간색으로 표시됩니다.
CSS : - 첫 번째 - 자녀 의사 클래스
첫 아이 의사 클래스 첫 번째 자식 요소를 선택 : 사용자가 사용할 수있는
참고 : IE8의 이전 버전에서 선언해야합니다 <DOCTYPE!> ,이 같이 : 첫 아이을 적용 할 수 있습니다.
첫 번째 <P> 요소를 일치
다음 예에서, 선택 소자는 소자의 제 자식으로 <p> 요소 일치 :
예
<head>
<style>
p:first-child
{
color:blue;
}
</style>
</head>
<body>
<p>I am a strong man.</p>
<p>I am a strong man.</p>
</body>
</html>
»시도
첫 번째 <난> 요소의 모든 <p> 요소와 일치
첫 번째는 <난> 다음 예제 요소는 선택은 <P> 요소를 찾습니다
예
<head>
<style>
p > i:first-child
{
color:blue;
}
</style>
</head>
<body>
<p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p>
<p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p>
</body>
</html>
»시도
<H2 모두 매치에서 <P> 요소의 첫 번째 자식 요소로 모든> 요소를 난을 <:
예
<head>
<style>
p:first-child i
{
color:blue;
}
</style>
</head>
<body>
<p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p>
<p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p>
</body>
</html>
»시도
CSS : - 랭 의사 클래스
: 랭 의사 클래스를 사용하면 다른 언어가 특별한 규칙을 정의 할 수있는 기능을 가지고 있습니다
참고 : IE8은 선언해야 <DOCTYPE을!> 지원하기 위해, 랭 의사 클래스를.
다음과 같은 예를 들어, : q를 더 요소 정의 시세의 랭 클래스 유형 속성 값 :
예
<head>
<style>
q:lang(no) {quotes: "~" "~";}
</style>
</head>
<body>
<p>Some text <q lang="no">A quote in a paragraph</q> Some text.</p>
</body>
</html>
»시도
더 많은 예제
하이퍼 링크에 다른 스타일을 추가
이 예는 하이퍼 링크에 다른 스타일을 추가하는 방법을 보여줍니다.
사용 : 초점
의사 클래스를 집중 :이 예를 사용하는 방법을 보여줍니다.
모든 CSS는 가상 클래스 / 요소
| 선택자 | 예 | 예 쇼 |
|---|---|---|
| : 선택 | input:checked | 선택한 모든 양식 요소 |
| : 비활성화 | input:disabled | 모든 장애인 폼 요소를 선택 |
| : 빈 | p:empty | 선택 모든 페이지 요소에는 아이가 없다 |
| : 사용 가능 | input:enabled | 사용 가능한 모든 폼 요소를 선택 |
| : 첫 번째 타입의 | p:first-of-type | 각 상위 요소를 선택하는 첫 번째 자식 요소 페이지의 페이지 요소입니다 |
| :의 범위 | input:in-range | 지정된 범위 내에서 요소 값을 선택 |
| : 무효 | input:invalid | 유효하지 않은 모든 요소를 선택합니다 |
| : 마지막 아이 | p:last-child | 마지막 자식 요소의 모든 페이지 요소를 선택 |
| : 마지막으로 형 | p:last-of-type | 각 페이지 요소는 부모의 요소 (P)의 마지막 요소 선택 |
| :하지 (선택) | :not(p) | 는 P를 제외한 모든 요소를 선택 |
| : n 번째 자녀 (N) | p:nth-child(2) | 제 2 서브 엘리먼트의 모든 P 요소를 선택할 |
| : n 번째-마지막 아이 (N ) | p:nth-last-child(2) | P 번째 자식 구성 요소의 역의 모든 요소를 선택 |
| : n 번째-마지막의 형 (N) | p:nth-last-of-type(2) | 모든 P의 요소를 선택하는 제 2 서브 엘리먼트 (p)의 역수 |
| : n 번째의 형 (N ) | p:nth-of-type(2) | 는 P에 대한 제 2 서브 엘리먼트의 모든 P 요소를 선택할 |
| : 전용 형 | p:only-of-type | P는 모든 요소 바로 하위 요소를 선택 |
| : 전용 아이 | p:only-child | P는 모든 요소 바로 하위 요소를 선택 |
| : 선택 | input:optional | 요소의 수 없습니다 "필수"속성을 선택 |
| : 범위를 벗어난 | input:out-of-range | 값의 지정 범위를 벗어난 선택 속성 요소 |
| : 읽기 전용 | input:read-only | 소자 특성의 판독 전용 속성을 선택 |
| : 읽기 - 쓰기 | input:read-write | 읽기 전용하지 않도록 선택 요소 속성의 속성을 |
| : 필요 | input:required | "필요"를 선택 속성은 요소의 속성을 지정합니다 |
| : 루트 | root | 문서의 루트 요소를 선택 |
| : 대상 | #news:target | 현재 활동 #news 요소를 선택합니다 (앵커의 이름이 포함 된 URL을 클릭) |
| : 유효 | input:valid | 속성에 대한 모든 유효한 값을 선택 |
| : 링크 | a:link | 모든 방문하지 않은 링크를 선택 |
| : 방문 | a:visited | 모든 방문한 링크를 선택 |
| : 활성 | a:active | 선택은 활성 링크입니다 |
| : 호버 | a:hover | 링크 상태에 마우스를 넣어 |
| : 초점 | input:focus | 입력 요소를 선택하면 포커스가 |
| : 첫 번째 편지 | p:first-letter | 각 <P> 요소의 첫 글자를 선택 |
| : 첫줄 | p:first-line | 각 <P> 요소의 첫 번째 행을 선택합니다 |
| : 첫 아이 | p:first-child | <] P> 요소 선택기는 첫 번째 자식 요소에 속하는 모든 요소와 일치 |
| : 전 | p:before | 각 <P> 요소 전에 내용을 삽입 |
| : 후 | p:after | 각 후 내용을 삽입 <P> 요소 |
| : 랭 (언어) | p:lang(it) | lang 속성 선택 <P> 시작 값에 요소 |