CSS常用选择器

@charset "utf-8";

ul li:nth-child(odd){background:#f00;} /* 奇数行<li>标签 */
ul li:nth-child(2n){background:#0f0;}  /* 偶数行<li>标签 */

ul li:nth-child(3){background:#f00;}                   /* 第3个<li>标签                                   */
ul li:first-child{background:#0f0;}                    /* 第一个<li>标签                                  */
ul li:last-child{background:#00f;}                     /* 最后一个<li>标签                                */
ul li:nth-last-child(3){background:#ff0;}              /* 倒数第3个<li>标签                               */
ul li:nth-child(n+4){background:#0ff;}                 /* 第4个(含)开始往后<li>标签，必须写n+4，不能写4+n */
ul li:nth-child(n+4):nth-child(-n+6){background:#f0f;} /* 第4~6个<li>标签                                 */
/* 说明：CSS是从1开始编号的，不像其它编程语言从0开始编号。 */

ul li:not(.thisclass){color:#000;} /* 不包含thisclass样式的<li>标签 */

a[href]{color:#f00;}       /* 包含href属性的<a>标签   */
a:not([href]){color:#0f0;} /* 不包含href属性的<a>标签 */

button[type="button"][disabled]{color:#f00;}       /* 选择type=button且包含disabled属性的<button>                                 */
button[type="button"]:not([disabled]){color:#0f0;} /* 选择type=button且不包含disabled属性的<button>，值得一提的是:not()可多次使用 */

input[name="keyword"]{color:red;} /* 选择name=keyword的<input>标签        */
input::placeholder{color:green;}  /* 修改<input>标签的placeholder文字颜色 */

.class-a:not(.class-b){color:red;} /* 选择包含“.class-a”样式且不包含“.class-b”样式的元素 */

.class:not([data-name=张三]){color:red;} /* 选择包含“.class”样式且“data-name”属性值不等于“张三”的元素 */

.parent:has(.child){color:red;} /* 选择“.parent”元素，且该元素必须拥有“.child”子元素。用于反向选择，即选择包含指定子类的父类。 */

/* 选择属性值不为空的元素                                                                                                           */
/* 备注：没有选择器可以直接选择属性值不为空的元素，但可以选择属性值为空的元素，所以只要把属性值为空的元素放到最后处理即可变相实现。 */
img[src]{display:block;}
img[src=""]{display:none;}

/* 使用媒体查询实现最小边框（即1像素边框） */
:root {
    --min-border-width: 1px;
}

@media screen and (-webkit-min-device-pixel-ratio:1) {
    :root {
        --min-border-width: 1px;
    }
}

@media screen and (-webkit-min-device-pixel-ratio:2) {
    :root {
        --min-border-width: 0.5px;
    }
}

@media screen and (-webkit-min-device-pixel-ratio:3) {
    :root {
        --min-border-width: 0.33333px;
    }
}

@media screen and (-webkit-min-device-pixel-ratio:4) {
    :root {
        --min-border-width: 0.25px;
    }
}

@media screen and (-webkit-min-device-pixel-ratio:5) {
    :root {
        --min-border-width: 0.2px;
    }
}