标签选择器：
h1, h2, p {} // 选择所有的h1,h2,p
类选择器 .content
id选择器 #content
全局选择器： 以*开头(星号标在大括号前，修饰了包含body所有的标签) *{ padding: 10px}
结构选择器：
1、后代选择器 (包含选择器)： 以空格隔开包含关系的元素
<div class="tab">
<p>标签1</p>
<div> <p>标签1</p> </div>
<h2>标签儿</h2>
<h2>标签儿</h2>
<p>标签2</p>
</div>
<style>
.tab p { color: orange; } // tab下所有的p都会改变颜色
</style>
2、子选择器 以>隔开父子级元素
div>p{ color: red; } // div下的p元素
3、兄弟选择器 ~ +
<div>兄弟元素
<p>兄元素</p>
<p>弟元素</p>
</div>div p~h2{ color: red} // p后面的h2
div p+h2{ color: green} // p后面紧挨着的h2
属性选择器 []
<div class="tab">
<p title='name'>标签1</p>
<div> <p>标签1</p> </div>
<h2>标签儿</h2>
<h1>标签1</h1>
<p title='www.name oppo'>标签2</p>
</div>
1、.tab p[title]:{ color: red} 选择所有带有title属性的p标签
2、.tab p[title = 'name']: { color: red} 选择所有title=name属性的标签
3、.tab p[title ^= 'na'] :{} 选择开头title属性带有na开头的标签
4、.tab p[title$= 'po'] :{} 选择title属性结尾是po的标签
5、.tab p[title *= 'name'] 只要含有name值就行的标签
6、.tab p[title ~= 'name flower'] 包含name的属性的标签
7、.tab p[title |= 'name'] 以name开头的属性的标签
伪类选择器
伪类不仅可以作用在a链接上，还可以作用在其他元素上
:link 未访问过的链接
:visited 访问过的链接
:active 鼠标点击的一瞬间
:hover 鼠标悬浮在链接上
:focus 具有焦点的输入元素 innput(将输入的外边框去掉 :focus{ outline: none})
:target 锚点目标选择器
:root 文档的根选择器
:empty 空选择器，没有任何子集的元素
:first-child div下所有孩子中的第一个
:last-child div下所有孩子中的最后一个
:first-of-type div下类型为p的第一个元素
:last-of-type div下类型为p的最后一个元素
:nth-child(2) 选择每个p元素是其父级的第二个子元素，选择器匹配父元素中的第 n 个子元素，元素类型没有限制。
:nth-last-child(n) 选择器匹配属于其元素的第 N 个子元素的每个元素，不论元素的类型，从最后一个子元素开始计数。
:nth-last-of-type(n)选择器匹配同类型中的倒数第n个同级兄弟元素。
:after 文本伪类选择器，在每个<p>元素之后插入内容
:before 文本伪类选择器，在每个<p>元素之前插入内容
:first-letter 文本伪类选择器，选择每一个<p>元素的第一个字母
:first-line 文本伪类选择器，选择每一个<p>元素的第一行
a {
&:link { // 未访问
color: yellow;
}&:visited { // 访问过
color: gray;
}
&:hover { // 鼠标移上去
color: red;
}
&:active { // 点击的一瞬间
color: blueviolet;
}
}
锚点目标的伪类选择器
<a href="#id"></a>
<div id='id'></div>
div:target{ 锚点的目标选择器}
<li > diyihge</li>
<li></li>li:empty{ display: none; }
首尾元素的伪类选择器
<div>
<p></p>
<h1></h1>
<p></p>
</div>
:first-child div下所有的第一个p元素 div p:first-chid
:last-child div下所有的最后一个p元素 div:last-child
:first-of-type 特定类型(p元素)的第一个元素 div p:first-of-type
:last-of-type 特定类型(p元素)的第一个元素
唯一选择器
:only-child 只有一个孩子的div
:only-of-type div下只有一种孩子类型的选择器
表单上的伪类选择器
<input type='text' disable>
<input type='password' required>
input:disable{}
input:required{}
:valid : valid用于匹配输入值为合法的元素
:invalid :invalid用于匹配输入值为非法的元素
文本的伪类选择器
p::first-letter { 选择每一个<p>元素的第一个字母
color: red
}
p::first-line { 选择每一个<p>元素的第一行
color: pink;
}
:beforep:before在每个<p>元素之前插入内容
:afterp:after在每个<p>元素之后插入内容
文本伪类表单
<div>
<input type='text'>
<span></span>
</div>
div {
width: 150px;
border: 1px solid gray
}
div input[type='text'] {
border: none;
outline: none;
width: 100px;
}
div input[type='text']+span::after {
content: '123';
}
权重应用
知识点补充：
!important : 强制权重优先级
浏览器默认font-size: 14px
可继承元素：color、font-size、font-family
通配符的权重：0
继承的权重： NULL 0>NULL
总结排序：!important > 行内样式>ID选择器 > 类选择器 > 标签 、伪类> 通配符* > 继承 > 浏览器默认属性
