通过标签来选择元素，标签{css样式}
案例：
<style>
div{color: green;}
</style>
<div>标签选择器</div>
通过class属性来选择元素，.类名{css样式}
案例：
<style>
.selector{color: green;}
</style>
<div class="selector">id选择器</div>
通过id属性来选择元素，#id名{css样式}
案例：
<style>
#selector{color: green;}
</style>
<div id="selector">id选择器</div>
语法：元素1 元素2{css样式}
案例：
<style>
div p{color: green;}
</style>
<div>
<p>后代选择器</p>
</div>
语法：元素1 > 元素2{css样式}
案例：
<style>
div>p{color: green;}
</style>
<div>
<p>子元素选择器</p>
</div>
语法：元素1,元素2{css样式}
案例：
<style>
div,p{color: green;}
</style>
<div>div标签</div>
<p>p标签</p>
案例：
<style>
*{margin:0;padding:0;}
</style>
语法：元素:link{css样式}
案例：
<style>
a:link{color: green;}
</style>
语法：元素:active{css样式}
案例：
<style>
a:active{color: green;}
</style>
语法：元素:visited{css样式}
案例：
<style>
a:visited{color: green;}
</style>
语法：元素:hover{css样式}
案例：
<style>
a:hover{color: green;}
</style>
总结：visited和link不能适用于普通标签，只有a标签才有；hover和active是任何标签都可以有的。
语法：元素:first-letter{css样式}
案例：
<style>
div:first-letter{color: green;font-size: 18px;}
</style>
语法：元素:first-line{css样式}
案例：
<style>
div:first-line{color: green;font-size: 18px;}
</style>
语法：哥哥+弟弟{css样式}
案例：
<style>
div+p{color: green;font-size: 18px;}
</style>
<div>我是哥哥标签</div>
<p>我是弟弟标签</p>
案例：
<style>
[name]{color: green;}
</style>
<input type="text" name="user" />
案例：
<style>
[type="text"]{color: green;}
</style>
<input type="text" name="user" />
案例：
<style>
[name~="username"]{color: green;}
</style>
<input type="text" name="user username" />
案例：
<style>
[name|="hello"]{color: green;}
</style>
<input type="text" name="hello-word" />
案例：
<style>
[name*="h"]{color: green;}
</style>
<input type="text" name="hello-word" />
总结：选择器权重
1、!important（无穷大） 行内样式（1000） id（100） class（10） 标签（1）
2、每一级满10也不会往前进1，等级是非常森严的
3、伪类首字母(:first-letter)>伪类首行(:first-line)>!important>id名>类名/属性>标签名>通配
以上内容，在整理时难免有疏漏错误之处，如有发现，可以通过顶部的“联系站长”提出反馈，感谢您的支持！