选择器（总结）

css主要由两部分组成

1. 选择器：html页面与css对接名
2. css的样式：写在大括号里，每个以“名：值”书写的属性，结束使用分号来分隔两个css属性

选择器的分类

满足选择器和HTML对应标签，找到元素后可以从，兄弟、子父、外层到内层，完整标签样式

标签选择器

利用html标签名来完成选择器的书写

类选择器

以class为HTML属性名，对于css “.”操作

ID选择器

以id为HTML属性名，对于css“#”操作

后代选择器

利用空格完成子元素的寻找

.box p{}

子元素选择器

在两个选择器中间使用“>”，选择一级子标签

兄弟选择器

相邻选择器

（+）加号

.box + p{}

说明：在class为box的HTML标签下的第一个兄弟标签

后续兄弟

（~）波浪号

.box ~ p{}

说明：在class为box的HTML标签的同级向下的所有p标签

选择器分组

不同选择器如果样式完成一样，就可以使用选择器的分组概念，用逗号“，”隔开每个选择器

p,div,.mystyle,#myid{}

属性选择器

根据标签上的属性名或属性值找到对应的标签

[属性名]{} 在HTML中含有此属性名的所有标签

【属性名=属性值】{}

【属性名 *= 部分属性值】{}  匹配属性值中间含有指定值得元素（模糊匹配）

【属性名 ^= 属性值】{}  开头是指定属性值

【属性名 $= 属性值】{}  结尾时指定属性值

HTML标签+指定标签

div.sty{}

说明：在当前网页中，class为sty的div标签

div#sty{}

伪类选择器

给浏览器添加一些功能选择器的标签写法

选择器：link

选择器：visited

选择器：hover

选择器：active

选择器：focus 当选择器获得焦点时，做一个样式的处理

说明：排列顺序：LVHA

超链接自带有link和visited

伪操作

可以在HTML标签开头或结尾通过css添加一块渲染区域，该区域可以单独设置css样式

：：专用名词

注意：

• ：：before和：：after必须搭配content：“内容”一起使用，否则没有效果
•  ：：before和：：after 在渲染的是一个行内元素，需要指出高和宽需要通过display：inline-block|block 才完成

通配符

*{}

找到网页中所有标签

选择器的分类

• 基础选择器
• 组合选择器

选择器的优先级

相同选择器下：内联>内部>外部

基础选择器：id>class>标签>通配符>继承

组合选择器需要进行权重数值计算后确定优先级