CSS选择器

选择器
1、选择器
选择器优先级：id>类名>标签
① 作用：选中html中的元素
（基础选择器 伪类选择器 伪元素选择器 属性选择器 子代选择器）
② 标签选择器 css中书写：标签名
③ 类名选择器
类命名规则：以字母、_、$开头，数字、字母、下划线、$
html中书写：class=”类名”
css中书写：.类名
④ id选择器
html中书写：id=”id名”
css中书写：#id名
id名必须是唯一的
⑤ 通用选择器
⑥ 交叉选择器 如：div.box div#box a.box a#box
⑦ 群组选择器 写同样的几行代码的时候用群组选择器
写法：选择器，选择器 ul li a，ul li a img{}
2、后代选择器：通过父元素选中子元素
格式：父元素 （空格）子元素
3、子代选择器：div>p 选中直系父级为div的p元素
4、伪类选择器：（操作的是真实的DOM元素）
:hover鼠标移入 :focus获得焦点
只关心该元素所在位置，不关心类型。
:first-child第一个子元素
:last-child最后一个子元素
:nth-child第n个子元素
of-type只关心该类型元素的第几个。
:first-of- type
:nth-of-type
:last-of-type
5、伪元素选择器（操作的不是真实的DOM元素）
::first-letter选中的第一个字符
::first-line 选中第一行
::before在元素内部内容的前面插入，必须写content，dsidplay：block
::after在元素内部内容的后面插入，必须写content，display：block
经常使用::after解决浮动引发的bug，尽量减少使用overflow：hidden。在高度没被撑开的元素身上加
如:ul::after{
content:””;
display:block;
width:0;
height:0;
line-height:0;
clear:both;
}
6、属性选择器：
① [属性名]{ } 如：[class]{ } 选中页面中有class属性的元素
② div[属性名=”属性值”]{ } 如：div[class=”box”]{ }匹配div元素，有属性class，并且值为“box”的元素。
③ div[class~=”box”] 匹配div元素，有class属性，属性值中有空格，并且其中一个单词为box，它本身也会被选中。
④ div[class|=”box”] 匹配div元素，有class属性，属性值中有连字符，并且以“box”单词开头，它本身也会被选中。
⑤ div[class=”box”] 匹配div元素，有class属性，属性值中只要有包含字母“box”的都会被选中，（栅格系统中常用）
⑥ div[class^=”b”] 匹配div元素，有class属性，属性值中以“b”开头的元素都会被选中。
⑦ div[class$=”b”] 匹配div元素，有class属性，属性值中以“b”结尾的元素都会被选中。
⑧ div+p 选中div后面紧跟的p标签，兄弟元素，只选中一个
⑨ div~p 选中div后面同级别的p标签，所有的。（常用于“井”字形排版去边框）