伪类和伪类参数的选择

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>伪类参数的选择</title>
</head>
<body>
    <ul class="list">
        <li>item1</li>
        <li>item2</li>
        <li class="three">item3</li>
        <li>item4</li>
        <li>item5</li>
        <li>item6</li>
        <li>item7</li>
        <li>item8</li>
    </ul>
    <style>
        /*
      :nth-of-type(an+b)
      1、a:系数，[0.1.2....] 单个还是一组
      2、n：系数，[0.1.2.3....]
      3、b：偏移量
      选择的情况：选择一个，选择一组
      */
        /* 1.匹配单个,a=0  0n可以缩写 */
        /* .list> :nth-of-type(0n + 3) {
              background-color: greenyellow;
          } */
        /* 2.匹配一组  a=1*/
        /* .list> :nth-of-type(n) {
              background-color: hotpink;
          } */
        /* 实际开发过程中，使用n+b(偏移量)来匹配元素 */
        /* 任务：匹配第3个元素后面的所有兄弟元素 */
        /* .list.three,
          .list .three~* {
              background-color: hotpink;
          } */
        /* an+n=1n+3
          n+3,从第三个开始 */
        /* .list> :nth-of-type(n + 3) {
              background-color: rgb(0, 130, 33);
          } */
        /* n:从0开始，n+3匹配全过程
          1. n=0  n+3=3
          2. n=1   n+3=4
          ....
          6. n=5   n+3=8  匹配第八个
          7. n=6   n+6=9  索引失败，匹配失败 */
        /* a=-1试试看，和a=1是一样的，但是反向取 */
        /* .list> :nth-of-type(-n + 3) {
            background-color: rgb(0, 130, 33);
        } */
        /* -1
        -2
        -3
        -4
        以此往下计算 */
        /* 如果匹配最后三个 */
        /*         
        .list> :nth-last-of-type(-n + 3) {
            background-color: rgb(0, 130, 33);
        } */
        /* 2.3 a=2:匹配奇偶位置的元素 */
        .list> :nth-of-type(2n) {
            background-color: khaki;
        }
        .list> :nth-of-type(2n + 1) {
            background-color: rgb(140, 240, 165);
        }
        /* 2n:even   2n+1:odd */
        .list> :nth-of-type(even):hover {
            /* 鼠标悬停偶数行，红色背景 */
            background-color: #ee1010;
        }
    </style>
    <!-- 表单伪类 -->
    <input type="" name="" value="" />
    <input type="text" name="" disabled />
    <input type="radio" name="sex" value="0" id="m" />
    <label for="m">男</label>
    <input type="radio" name="sex" value="1" id="" />
    <label for="">女</label>
    <br />
    <p></p>
    <button>提交</button>
    <style>
        input:disabled {
            background-color: yellow;
        }
        input:enabled {
            background-color: rgb(165, 147, 165);
        }
        input:checked+label {
            color: red;
        }
        button {
            width: 100px;
            height: 30px;
            border: none;
            outline: none;
            background-color: seagreen;
            color: white;
        }
        button:hover {
            background-color: yellow;
        }
        input:focus {
            background-color: tomato;
        }
    </style>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>选择器3：伪类</title>
</head>
<body>
    <!-- 伪类：伪，表示假的，类，权重，class级别 -->
    <!-- 伪类
    1.结构伪类：根据元素位置获取元素
    2.状态伪类：根据状态来获取元素
    -->
    <!-- 重点学习结构伪类 -->
    <!-- ul.list>li*8{item$} -->
    <ul class="list">
        <li class="first">item1</li>
        <li>item2</li>
        <li>item3</li>
        <li>item4</li>
        <li>item5</li>
        <li>item6</li>
        <li>item7</li>
        <li>item8</li>
        <p>aaa</p>
        <p>bbb</p>
        <p>ccc</p>
    </ul>
    <style>
        /* 结构伪类：主要是为了选择子元素的，要给予一个选择的起点 */
        /* .list> :first-child {
            background-color: yellow;
        } */
        /* 分组结构伪类：以后只用这个 */
        .list .first {
            background-color: turquoise;
        }
        .list>li:nth-of-type(1) {
            background-color: tomato;
        }
        .list>li:nth-last-of-type(1) {
            background-color: tomato;
        }
        .list>li :first-of-type {
            background-color: greenyellow;
        }
    </style>
</body>
</html>

更多相关文章

随机推荐