选择器
选择器:
1.基础选择器
通配符选择器
*{}
元素选择器
h1{}
组合选择器/并集选择器
h1,h2,h3{}
类选择器
选择html标签中属性名为class的值得标签
<h1 class="tit"></h1>
.tit{}
注意
必须要以英文点号开始
包含字母、数字、连字符、下划线
点号后面必须是字母开始
区分大小写
一个类选择器（类名）可以应用到多个标签
p.home p元素下类为home的p选中
ID选择器
<h1 id="tit"></h1>
#tit{}
2.层次选择器
后代选择器
祖先元素 后代元素{}
子级选择器
父级元素>子级元素{}
兄弟选择器
兄弟元素A+兄弟元素B{}
选择元素A后面的元素B，且必须是紧邻的，即两元素间不能有其他元素
通用选择器
兄弟元素A~兄弟元素B
选择匹配的B元素，即A元素后的所有B元素
p~span{}
3.伪类选择器
静态伪类选择器
链接未访问使用：link
a:link{}
已访问时使用：visited
a:visited{}
动态伪类选择器
获取焦点：focus
使用tab触发焦点时的样式
a:focus{}
鼠标悬停时使用：hover
a:hover{}
鼠标点击时使用：active
a:active{}
结构伪类选择器
没有其他类型的兄弟元素
选择li下的第一个li
li:first-child{}
选择li下的最后一个li
li:last-child{}
选择第n个li
li:nth-child(n){}
选择倒数第n个li
li:nth-last-child(n){}
取奇数项li
li:nth-child（2n+1）{} n取0、1、2
li:nth-child(odd){}
取偶数项li
li:nth-child（2n）{} n取0、1、2
li:nth-child(even){}
其他类型的兄弟元素
选中p类型下的第n个p元素
p:nth-of-type(n){}
选中没元素内容的p标签
p:empty{}
选中父级只有一个子级标签的子级标签
div>em:only-child{}
否定伪类选择器
除了li下面的第n个li元素不选，其他全部选中
li:not(:nth-child(n)){}
4.伪元素选择器
以两个冒号开始
元素::selection{}
规则中只有color和background
只适用块元素
元素::first-letter{}
选中第一个字母
元素::first-line{}
选中第一行
在标签前加内容
元素::before{content:"";
color: red;}
在标签后加内容
元素::after{content:"";
color: red;}
5.属性选择器
input[type="text"]{}
选中属性值为text的input
input[type|="text"]{}
选中以text-开始的input的type属性值
<input type="text-sadads">
input[type^="text"]{}
选中标签中type属性以text属性值开始
注：该声明表示属性值有多个并每一个属性值之间用空格隔开
<input type="text sadads">
input[type*="text"]{}
选中input标签中type属性包含text属性值，属性值之间可不隔开
<input type="sadtextsadads">
input[type~="text"]{}
选中input标签中type属性包含text属性值
注：该声明表示属性值有多个并每一个属性值之间用空格隔开
<input type="sadds text sadads">
input[type$="text"]{}
选中标签中type属性以text属性值结束
<input type="ssd text">
通常用在input
