【id&&class】元素选择器
【css三大特性】
层叠性：
z-index 开启定位后可以调整层级
优先级:
!important > 内联> id > class[属性 伪类] >标签[伪元素]> * 继承
优先级的权重
!important 内联(代码控制也是属于内联) id class[属性 伪类] 标签[伪元素] * 继承
权重 10000 1000 100 10 1 0
注意：权重值是可以相加的 如果权重值相加后 一样 以后面书写的为准
权重值相加是不会超过权重最大的数量级
继承性:
字体默认大小是16px
【内联样式】F：1000
<标签 style=”属性值”></标签>
【id】选择器F：100（id属性在一个文档中是唯一的）
id 选择器使用 HTML 元素的 id 属性来选择特定元素。
元素的 id 在页面中是唯一的，因此 id 选择器用于选择一个唯一的元素！
要选择具有特定 id 的元素，请写一个井号（＃），后跟该元素的 id。
#id{}
用法：选中是带id名的标签
注意：id 名称不能以数字开头。
【class】选择器F：10（class属性 类）
类选择器选择有特定 class 属性的 HTML 元素。
如需选择拥有特定 class 的元素，请写一个句点（.）字符，后面跟类名。
还可以指定只有特定的 HTML 元素会受类的影响。
HTML 元素也可以引用多个类。
.类名{}
用法：选中带类名的标签
注意：类名不能以数字开头！
【伪类：元素的特殊状态【:】】F：10
用法：伪类选择器的效果可以添加一个实际的类来实现，
元素：伪类状态
【hover】悬浮状态
元素:hover{}
【focus】获取焦点（input）
input：focus{}
【visited】访问后
a:visited{}
【empty】选中内容为空的元素
div:empty{}
【disabled】禁用（input）
input:disabled{}
【标签】标签选择器F：1(元素选择器)
元素选择器根据元素名称来选择HTML 元素。
标签名{}
用法：选中所有的带HTML的某名称的标签
【伪元素：元素的特殊位置【::】】F：1
元素标签：：伪元素位置
用法：伪元素选择器的效果要添加一个实际的元素来实现。
【before】在…之前加伪元素
元素::before{content: ” ”};
【after】在…之后加伪元素
元素::after{content: ” ”};
【first-line】首行(p)
p::first-line{}
【first-letter】第一个字母（p）
p::first-letter{}
【placeholder】input提示内容
input::placeholder{}
【css中的伪元素和伪类】
| 选择器 | 示例 | 示例说明 |
|---|---|---|
| :checked | input:checked | 选择所有选中的表单元素 |
| :disabled | input:disabled | 选择所有禁用的表单元素 |
| :empty | p:empty | 选择所有没有子元素的p元素 |
| :enabled | input:enabled | 选择所有启用的表单元素 |
| :first-of-type | p:first-of-type | 选择的每个 p 元素是其父元素的第一个 p 元素 |
| :in-range | input:in-range | 选择元素指定范围内的值 |
| :invalid | input:invalid | 选择所有无效的元素 |
| :last-child | p:last-child | 选择所有p元素的最后一个子元素 |
| :last-of-type | p:last-of-type | 选择每个p元素是其母元素的最后一个p元素 |
| :not(selector) | :not(p) | 选择所有p以外的元素 |
| :nth-child(n) | p:nth-child(2) | 选择所有 p 元素的父元素的第二个子元素 |
| :nth-last-child(n) | p:nth-last-child(2) | 选择所有p元素倒数的第二个子元素 |
| :nth-last-of-type(n) | p:nth-last-of-type(2) | 选择所有p元素倒数的第二个为p的子元素 |
| :nth-of-type(n) | p:nth-of-type(2) | 选择所有p元素第二个为p的子元素 |
| :only-of-type | p:only-of-type | 选择所有仅有一个子元素为p的元素 |
| :only-child | p:only-child | 选择所有仅有一个子元素的p元素 |
| :optional | input:optional | 选择没有"required"的元素属性 |
| :out-of-range | input:out-of-range | 选择指定范围以外的值的元素属性 |
| :read-only | input:read-only | 选择只读属性的元素属性 |
| :read-write | input:read-write | 选择没有只读属性的元素属性 |
| :required | input:required | 选择有"required"属性指定的元素属性 |
| :root | root | 选择文档的根元素 |
| :target | #news:target | 选择当前活动#news元素(点击URL包含锚的名字) |
| :valid | input:valid | 选择所有有效值的属性 |
| :link | a:link | 选择所有未访问链接 |
| :visited | a:visited | 选择所有访问过的链接 |
| :active | a:active | 选择正在活动链接 |
| :hover | a:hover | 把鼠标放在链接上的状态 |
| :focus | input:focus | 选择元素输入后具有焦点 |
| :first-letter | p:first-letter | 选择每个<p> 元素的第一个字母 |
| :first-line | p:first-line | 选择每个<p> 元素的第一行 |
| :first-child | p:first-child | 选择器匹配属于任意元素的第一个子元素的 <p> 元素 |
| :before | p:before | 在每个<p>元素之前插入内容 |
| :after | p:after | 在每个<p>元素之后插入内容 |
| :lang(language) | p:lang(it) | 为<p>元素的lang属性选择一个开始值 |
【*】通用选择器（通配符）F：0
通用选择器（*）选择页面上的所有的 HTML 元素。
其他选择器（子代，后代，兄弟，并列选择器）
【后代选择器】
.class .class
要求：选中所有元素内部符合条件的元素
【子代选择器 >】
.class(父元素)>.class(子元素)
要求：必须是子元素（选择器的匹配规则是 从右向左匹配）
【兄弟元素选择器 +】
.class(兄弟1)+.class（兄弟2）
要求：元素之间不能有别的元素
【兄弟选择器 ~】
.class(兄弟1)~.class（兄弟2）
要求：中间可以有别的元素
【并列选择器 ,】
.class , .class
