CSS3 속성 선택기

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>

CSS3 속성 선택기

좋은 웹페이지 즐겨찾기