类 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:focusE:not()E:emptyE:checkedE:enabledE:disabledE:first-child 同一层排行第一E:nth-child(n)E:nth-last-child(n)E:last-childE:only-childE:first-of-type 同一层细分领域第一E:nth-child(n)E:nth-last-child(n)E:last-of-typeE: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"]