html5/css3에 추가되는 의사 클래스-프런트엔드 Q&A-php.cn

html5/css3에 추가되는 의사 클래스

醉折花枝作酒筹

풀어 주다： 2023-01-06 11:16:10

원래의

2233명이 탐색했습니다.

새로운 의사 클래스는 ":first-child", ":last-child", ":nth-child(n)", ":link", ":visited", ":active", ": hover", ":focus", ":not()" 등

html5/css3에 추가되는 의사 클래스

이 튜토리얼의 운영 환경: Windows7 시스템, CSS3&&HTML5 버전, Dell G3 컴퓨터.

구조적 의사 클래스 선택기

:first-child 첫 번째 하위 노드, :last-child 마지막 하위 노드, :nth-child(n) n 번째 하위 노드, :nth-last-child(n ) 두 번째 n번째 자식 노드, :only-child 유일한 자식 노드

:nth-child(n), :nth-last-child(n)도 괄호 안의 항목을 사용하여 선택을 제한하는 몇 가지 특별한 용도가 있습니다.

1 . 홀수/이벤트: 홀수/짝수 요소

2. xn+y: xn+y 요소

다음은 li 태그에 대한 의사 클래스 선택기를 설정하는 것입니다.

<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <style type="text/css">
      li:first-child {
        border: 1px solid black;
      }

      li:last-child {
        background-color: #aaa;
      }

      li:nth-child(2) {
        color: #888;
      }

      li:nth-last-child(2) {
        font-weight: bold;
      }

      span:only-child {
        font-size: 30pt;
      }
    </style>
  </head>
  <body>
    <ol>
      <li>oaaaaaaaaaaa</li>
      <li>obbbbbbbbbbb</li>
      <li>occccccccccc</li>
      <li>odddddddddd</li>
      <li>oeeeee</li>
      <li><span id="andorid"></span>saaaaaa啊飒飒</li>
    </ol>
  </body>
</html>

로그인 후 복사

다양한 효과를 볼 수 있습니다

UI 요소 상태 의사 클래스 선택기

:link(방문하기 전의 요소(보통 하이퍼링크만)), :visited(방문한 요소(보통 하이퍼링크), :active(액세스되는 요소는 마우스 클릭과 놓기 사이에 있습니다(일반적으로 하이퍼링크만)), :hover(마우스 호버 상태의 요소), :focus(포커스를 받은 요소)

<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <style type="text/css">
      .a {
        font-size: 50px;
      }
      .a:link {
        color: red;
      }
      .a:visited {
        color: grey;
      }
      .a:active {
        color: green;
      }
      .b {
        height: 40px;
        width: 200px;
      }
      .b:focus {
        background-color: blue;
      }
      .c {
        height: 40px;
        width: 60px;
      }
      .c:hover {
        background-color: skyblue;
      }
    </style>
  </head>
  <body>
    <a href="#" class="a">aaa</a>
    <form action="#">
      文本框:<input type="text" name="aaa" class="b" />
      <input type="submit" value="提交" class="c" />
    </form>
  </body>
</html>
로그인 후 복사
처음에는 이런 모습

하이퍼링크를 클릭했을 때

클릭 후

다음으로 텍스트 상자를 보면, 텍스트 상자에 포커스를 놓으면 (즉, 텍스트 상자의 입력 가능 상태) 다음을 얻습니다. 초점이 맞춰진 스타일

버튼을 다시 보고, 마우스를 버튼 위로 가져가면 다음을 얻습니다. 작성자가 스크린샷을 찍고 싶어하는데 스크린샷을 찍을 때 커서가 캡처되지 않아서 사진에 커서가 보이지 않습니다)

:not() 의사 클래스 선택자는 두 선택자를 빼는 것과 같습니다. 예: li:not(#a){ }li 선택기와 일치하지만 a

의 ID와 일치하지 않는 모든 요소 블록을 수정합니다. 권장 학습:
css 비디오 튜토리얼
위 내용은 html5/css3에 추가되는 의사 클래스의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!