CSS选择器归类举例

类 id 元素选择器

<li class="red">1</li>
<li id="blue">2</li>
<li class="red">3</li>
<li>4</li>
<style>
    .red{color:red;}
    #blue{color:blue;}
    li{color:green;}
    *{font-size:16px;}
</style>

伪类选择器

<a href="https://www.baidu.com">链接</a>
<style>
    a:link{color:blue;}
    a:visited{color:grey;}
    a:hover{color:red;}
    a:active{color:yellow;}
</style>

且
E:focus
E:not()
E:empty
E:checked
E:enabled
E:disabled
E:first-child  同一层排行第一
E:nth-child(n)
E:nth-last-child(n)
E:last-child
E:only-child
E:first-of-type 同一层细分领域第一
E:nth-child(n)
E:nth-last-child(n)
E:last-of-type
E:only-of-type

伪元素选择器

内的
E::first-letter E内的第一个字母
E::first-line E内的第一行
E::before E内的最前面
E::after E内的最后面

属性选择器

```css
^开始 $结尾 *包含
E[att]
E[att="val"]
E[att^="val"]
E[att$="val"]
E[att*="val"]
包含val并用空格分隔
E[att~="val"]
以val开头并用连接符"-"分隔
E[att|="val"]