CSS3 속성 선택기

30425 단어 프런트엔드
CSS3 Super Selector
속성 선택기 [att*=val]에는 val, [att^=val] 시작, [att$=val] 끝이 있습니다.
구조적 위조 선택기 위조 원소
    a:link{
        color:black;
    }
    /*         */
   
    a:visited{
        color:red;
    }
    /*         */
 
    a:hover{
        color: yellow;
    }
    /*            */
  
    a:active{
        color: green;
    }
    /*          */

위원소 선택기
  • first-line 모 요소의 첫 줄 문자
  • first-letter 모 요소의 자모나 첫 글자
  • before 모 요소 앞에 내용 삽입
  • 애프터 요소 뒤에 내용 삽입
  • 구조적 위조 선택기
  • root
  • not
  • empty 요소의 내용이 공백일 때
  • target은 하이퍼링크를 클릭하여 지정한 target 요소로 이동한 후 작용
  • 선택기first-child,last-child,nth-child,nth-last-child,nth-child(An+B),only-child
  • first-child 첫 번째 원소
  • last-child 마지막 원소
  • nth-childnth-child(n) 순서 n번째 서브원소nth-child(odd) 순서 홀수 서브원소nth-child(even) 순서 짝수 서브원소
  • nth-last-childnth-last-child(n) 밑에서 n번째 서브원소nth-last-child(odd) 역순 홀수 서브원소nth-last-child(even) 역순 짝수 서브원소
  • nth-child(An+B) 순환 사용 스타일 A는 순환할 때마다 몇 가지 스타일 B를 포함하고 순환에 지정된 스타일이 있는 위치를 표시한다
  • only-child는 유일한 서브원소에만 작용
  • UI 요소 상태 유사 클래스 선택기
  • E:hover, E:active, E:focus는 마우스 포인터가 원소로 이동할 때 원소에 사용할 스타일을 지정합니다:hover {CSS 스타일} 원소의 type 속성 input [type="text"]:hover {CSS 스타일}
  • E:active는 요소가 활성화될 때 사용할 스타일을 지정합니다.
    E:focus 지정한 요소는 커서 초점점을 얻을 때 사용하는 스타일입니다. 주로 텍스트 상자 컨트롤에서 초점점을 얻고 텍스트 입력을 할 때 사용합니다
  • E:enabled, E:disabled 사용 가능, 사용 불가능
  • E:read-only, E:read-write 읽기, 비읽기
  • E:checked, E:default, E:indeterminate E:checked 폼의radio 단일 선택 상자나 checkbox 복선 상자가 선택 상태일 때 E:default (firefox만 지원) E:indeterminate (chrome만 지원) 선택하지 않았을 때 전체 단일 선택 상자의 스타일
  • 인스턴스 코드는 다음과 같습니다.
    
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>     title>
        <style type="text/css">
        [id*=t1]{
            font-style: oblique;
        }
        [id$=2]{
            font-style: oblique;
        }
        [id^=t]{
           color:rgb(46, 226, 172);
        }
        :root{
            background: rgb(197, 109, 109);
        }
        body{
            background: white;
        }
        body *:not(a){
            background: rgba(225, 201, 235, 0.753);
        }
        /* :empty{
            background: rgb(79, 109, 134);
        } */
        :target{
            background: green;
        }
        a:link{
            color:black;
        }
        /*         */
        a:visited{
            color:red;
        }
        /*         */
        a:hover{
            color: yellow;
        }
        /*            */
        a:active{
            color: green;
        }
        /*          */
        a{
           text-decoration: none;
        }
    
        p:first-line{
            color: red;
    
        }
        P:first-letter{
            font-size:40px;
        }
        p:before{
            content: "  ";
        }
        p:after{
            content: "  ";
        }
        li{
            list-style: none;
        }
        /* li:first-child{
            color:brown;
        }
        li:last-child{
            color:rgb(65, 42, 165);
        }
        li:nth-child(2){
            color:rgb(165, 42, 155);
        }
        li:nth-last-child(2){
            color:rgb(42, 165, 73);
        } */
    
        li:nth-child(4n+1){
            color: aqua;
    
        }
        li:nth-child(4n+2){
            color: black;
        }
        li:nth-child(4n+3){
            color: blue;
        }
        li:nth-child(4n+4){
            color: blueviolet;
        }
    
        li:only-child{
            color: rgb(165, 42, 124);
        }
    
        /* input[type="text"]:hover{
            background: green;
        }
    
        input[type="text"]:active{
            background: blue;
        }
    
        input:focus{
            background: red;
        } */
    
        /* input[type="text"]:enabled{
            background: green;
        }
    
        input[type="text"]:disabled{
            background: red;
        } */
    
        input[type="text"]:read-only{
            background:white;
        }
    
        input[type="text"]:read-write{
            background:green;
        }
    /* 
        input[type="checkbox"]:checked{
            outline: 2px solid red;
        } */
    
        input[type="checkbox"]:default{
            outline: 2px solid red;
        }
    
        input[type="radio"]:indeterminate{
            outline: 2px solid red;
        }
    
    
    
        style>
    head>
    <body>
        <a href="#target1">       a>
        <a href="#target2">       a>
        <p id="target1">        <br/>      p>
        <p id="target2">        p>
        <p id="t1">        p>
        <br/>
        <table  border="1" cellpadding="0" cellspacing="0" width="100px">
            <tr>
                <td>1td>
                <td>2td>
                <td>3td>
                <td>4td>
            tr>
            <tr>
                    <td>1td>
                    <td>2td>
                    <td>td>
                    <td>4td>
                tr>
        table>
        <h1>  h1>
        <ul>
            <li>    li>
        ul>
        <h1>  h1>
        <ul>
            <li> 1 li>
            <li> 2 li>
            <li> 3 li>
            <li> 4 li>
            <li> 5 li>
            <li> 6 li>
        ul>
        
    
        <form><input type="text" placeholder="     " value="uncle-huang" readonly/>
                
                <br/><input type="text" placeholder="     " />
        form>
    
        <form><input type="radio" name="sex"> 
            <input type="radio" name="sex"> 
            
            <br/><input type="checkbox" checked>        
            <input type="checkbox">  
            <input type="checkbox">      
            <input type="checkbox"> 
        form>
    body>
    html>
    

    좋은 웹페이지 즐겨찾기