伪类选择器 - 0425

  子元素选择器

实例

ul :first-child {
    background-color: coral;
}

ul :last-child {
    background-color: coral;
}

ul :nth-child(6) {
    background-color: coral;
}

ul :nth-last-child(3) {
    background-color: coral;
}

  注意：:nth-child()和:nth-last-child()均是从1开始

  类型选择器

实例

ul li:first-of-type {
    background-color: darkorchid;
    color: white;
}

ul li:last-of-type {
    background-color: darkorchid;
    color: white;
}

ul li:nth-of-type(6) {
    background-color: darkorchid;
    color: white;
}

  表单

实例

form :enabled 
    background-color: wheat;
}


form :checked + label {
    color: red;
}

form :invalid {
    color: red;
}

form :focus {
    background-color: lightgreen;
}

button:hover {
    width: 56px;
    height: 28px;
    background-color: black;
    color: white;
}