强大的css选择器

很早很早以前，我对css选择器的概念一直停留在 #id .class ，直到我看到了mdn的Pseudo-classes(伪类class).

p:not(.class)

<span class='class'>不被选择</span>
<span class="bbb">选中</span>

p:last-child;;;p:first-child p:nth-child(2)

选择第一个子元素，最后一个子元素 ，第二个子元素，强大的select选择器配合document.querySelectorAll('p:last-child')进行筛选简直方便极了，和正则选择字符串一样方便

div ul:not(:first-child):not(:last-child) {
    background-color: #900;
}

:empty 选择没有子元素的元素

div.container:empty {
    background-color: #900;
}

button > button > button 选择兄弟元素的兄弟元素

button>button>button {
    background-color: #900;
}

input:checked 选择已经被勾选的 input元素

结论：善用伪类元素选择器，省去了大量无效class类名，id，，无效js代码。增加了代码的可读性