image.png
    属性选择器

    Element[attr ^= “value” ] 属性以字符串开头
    Element[attr $= “value” ] 属性以字符串开头
    Element[attr ~= “value” ] 属性以字符串开头
    image.png
    伪类选择器

    :root 的优先级大于 html
    :hover
    :not([textIndent $= “first”]) 查找textIndent 不是以first结尾的元素
    :not([textIndent ^= “first”]) 查找textIndent 不是以first开头的元素

    :not 中选择器的权重问题
    :not (div > a) 非div下的a

    :empty 选择器 查找 真正是空的元素 内部没有任何文本节点
    image.png
    :target 用户选中某个锚点之后 将找到的那个元素应用上特定的样式

    :nth-child(an + b)以a为循环的个数，b为基数

    :first-child 查找相同级别下面第一次出现的元素

    1. 结构选择器:
      1. 属性选择器
        1. Element[attr ^= “value” ] 属性以字符串开头
        2. Element[attr $= “value” ] 属性以字符串开头
        3. Element[attr ~= “value” ] 属性以字符串开头
      2. 伪类选择器
        1. :nth-child
        2. :nth-of-type
        3. :not
        4. :target
        5. :empty
    2. UI元素状态伪类选择器
      1. :active
      2. :hover
      3. :focus
      4. :enabled
      5. :disabled
      6. :read-only 只读
      7. :read-write 可读写
      8. :checked 选中状态
      9. :default 当前浏览器被打开的时候当前被指定的默认样式是什么。
      10. :indetermate
      11. :first-letter 必须是块级元素
      12. :first-line 必须是块级元素
    3. 关系选择器
      1. E F 后代选择器
      2. E > F 直接子元素选择器

    禁用 disabled
    只读 readonly
    在表单中的唯一作用就是 readonly 可以被提交 disabled不会被提交.
    readonly选择器的值会覆盖disabled
    read-write 可以作用于disabled

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>选择器</title>
    8.     <style>
    9.         /* :not(div > a) {
    10.             color: aquamarine;
    11.         } */
    13.         /* 空 */
    14.         .box{
    15.             width: 100px;
    16.             height: 100px;
    17.             background-color: brown;
    18.             color: #fff;
    19.         }
    21.         .box:empty{
    22.             color: #000;
    23.             background-color: blue;
    24.         }
    25.         /* 用户选中某个锚点之后 将找到的那个元素应用上特定的样式 */
    26.         :target{
    27.             background-color: black;
    28.         }
    30.         p:nth-child(4n + 1){
    31.             background-color: #aaa;
    32.         }
    33.         p:nth-child(4n + 2){
    34.             background-color: blue;
    35.         }
    36.         p:nth-child(4n + 3){
    37.             background-color: purple;
    38.         }
    39.         p:nth-child(4n + 4){
    40.             background-color: chartreuse;
    41.         }
    42.         p:nth-child(4n + 5){
    43.             background-color: salmon;
    44.         }
    46.         /* nth-child */
    47.         div.last :first-child{
    48.             background-color: red;
    49.         }
    50.         /* nth-of-type */
    52.         div.last :first-of-type{
    53.             background-color: salmon;
    54.         }
    55.         .box2 :only-child{
    56.             color: salmon;
    57.         }
    59.         /* UI元素状态伪类选择器 */
    60.         .box3 > input:hover{
    61.             color: salmon;
    62.         }
    63.         .box3 > input:focus{
    64.             color: salmon;
    65.         }
    66.         /* 鼠标按住不动的颜色 */
    67.         .box3 > input:active{
    68.             color: blue;
    69.         }
    70.         .box3 > input:disabled{
    71.             background-color: #aaa;
    72.         }
    73.         .box3 > input:enabled{
    74.             background-color: #fff;
    75.         }
    76.         .box3 > input:read-only{
    77.             background-color: #ccc;
    78.             color: red;
    79.             outline: none;
    80.             border: none;
    81.         }
    82.         .box3 > input:read-write{
    83.             background-color: green;
    84.         }
    85.         .box3 > input[type = "radio"]:checked{
    86.             outline: 2px solid #000;
    87.         }
    88.         .box3 > input[type = "radio"]:default{
    89.             outline: 0px solid #000;
    90.         }
    91.         .box3 > input[type = "checkbox"]:checked{
    92.             outline: 2px solid #000;
    93.         }
    94.         .box3 > input[type = "checkbox"]:default{
    95.             outline: 10px solid #000;
    96.         }
    97.         /* indeterminate 不确定 */
    98.         .box4 > :indeterminate :indeterminate + label{
    99.             background-color: greenyellow;
    100.         }
    101.         .box5 > p::first-letter{
    102.             color: red;
    103.             font-size: 18px;
    104.             text-transform: uppercase;
    105.         }
    106.         .box5 > :nth-of-type(2)::first-line{
    107.             color: red;
    108.         }
    109.         .box5 > p::selection{
    110.             color: forestgreen;
    111.             background-color: gold;
    112.         }
    113.         /* 直接子元素选择器*/
    114.         .box6 > span{
    115.             color: gold;
    116.         }
    117.         span {
    118.             color: green;
    119.         }
    120.         /*  */
    121.     </style>
    122. </head>
    123. <body>
    124.     <h1>:not</h1>
    125.     <a href="">我是非table下的a</a>
    126.     <table>
    127.         <a href="">我是table下的a</a>
    128.         <tr>
    129.            <td> <a href="">td下的a</a></td>
    130.         </tr>
    131.     </table>
    132.     <div>
    133.         <a href="">我是div下的a</a>
    134.     </div>
    136.     <!-- empty -->
    137.     <hr>
    138.     <h1>empty</h1>
    139.     <div class="box">
    140.     <hr>
    142.         <!-- 我是换行的注释节点 -->
    143.     </div>
    144.     <div class="box"><!-- 我是注释节点 --></div>
    145.     <div class="box">我是普通文本节点</div>
    146.     <hr>
    147.     <h1>锚点选择器</h1>
    148.     <!-- 锚点选择器 -->
    149.     <div id="one">one</div>
    150.     <div id="two">two</div>
    151.     <div id="three">three</div>
    152.     <div id="four">four</div>
    153.     <a href="#one">one</a>
    154.     <a href="#two">two</a>
    155.     <a href="#three">three</a>
    156.     <a href="#four">four</a>
    157.     <hr>
    158.     <h1>
    159.         nth-child
    160.     </h1>
    161.     <!-- nth-child -->
    162.     <p>1</p>
    163.     <p>2</p>
    164.     <p>3</p>
    165.     <p>4</p>
    166.     <p>5</p>
    167.     <p>6</p>
    168.     <p>7</p>
    169.     <p>8</p>
    170.     <hr>
    172.     <!-- 
    173.                 /* nth-of-type */
    174.         div.last :first-of-type{
    175.             background-color: salmon;
    176.         }
    177.      -->
    178.      <h1>
    179.         nth-of-type
    180.      </h1>
    181.     <div class="last">
    182.         <span>这是span1</span>
    183.         <span>这是span2</span>
    184.         <span>这是<em>嵌套em的span</em></span>
    185.         <span>这是<span>嵌套span</span>的span</span>
    186.         <em>这是em</em>
    187.         <span>这个是最后一个span</span>
    188.     </div>
    190.     <!-- only-child -->
    192.     <hr>
    193.     <h1>only-child</h1>
    194.     <div class="box2">
    195.         <div>
    196.             <i>只有一个子元素</i>
    197.         </div>
    198.         <div>
    199.             <i>我是第一个子元素</i>
    200.             <em>我是em标签</em>
    201.             <span>
    202.                 我有一个
    203.                 <span>span</span>
    204.             </span>
    205.         </div>
    206.     </div>
    207.     <hr>
    208.     <h1>
    209.         a标签伪类
    210.     </h1>
    211.     <a href="">这个是a标签</a>
    212.     <input type="text">
    215.     <!-- UI元素状态伪类选择器 -->
    216.     <hr>
    217.     <h1>
    218.         UI元素状态伪类选择器
    219.     </h1>
    220.     <div class="box3">
    221.         <input type="text" value="enabled" enabled/>
    222.         <input type="text" value="disabled" disabled/>
    224.         <input type="text" value="read-only" readonly/>
    225.         <input type="text" value="read-write" readwrite />
    227.         <input type="radio" />
    228.         <input type="checkbox" id="read" checked disabled/>
    229.         <label for="read">read</label>
    230.         <input type="checkbox" id="tourist"/>
    231.         <label for="tourist">tourist</label>
    232.     </div>
    233.     <hr>
    234.     <h1>indeterminate</h1>
    235.     <div class="wrap">
    236.         <div class="box4">
    237.             <input type="checkbox" id="radio">
    238.             <label for="radio">radio</label>
    240.         </div>
    241.         <div class="box4">
    242.             <input type="checkbox" id="checkbox" checked>
    243.             <label for="checkbox">checkbox</label>
    244.         </div>
    245.     </div>
    247.     <hr>
    248.     <h1>first-letter</h1>
    249.     <div class="box5">
    250.         <p class="test">这是为了测试
    251.             这是为了测试
    252.             这是为了测试
    253.             这是为了测试
    254.             这是为了测试
    255.         </p>
    257.         <p class="test">这是为了测试
    258.             这是为了测试
    259.             这是为了测试
    260.             这是为了测试
    261.             这是为了测试
    262.         </p>
    263.         <p class="test">today is a nice day
    264.             today is a nice day
    265.             today is a nice day
    266.             today is a nice day
    267.             today is a nice day
    268.         </p>
    269.     </div>
    270.     <hr>
    271.     <h1>后代选择器</h1>
    272.     <div>
    273.         <span></span>
    274.     </div>
    275.     <hr>
    276.     <h1>直接后代选择器</h1>
    277.     <div>
    278.         <span>
    279.             <span>我是span里面的span</span>
    280.         </span>
    281.     </div>
    283.     <script>
    284.         var oInputs = document.getElementsByClassName('wrap')[0].querySelectorAll("input");
    285.         oInputs.forEach(item=>{
    286.             item.indeterminate = true;
    287.         })
    288.     </script>
    289. </body>
    290. </html>