常用选择器

标签选择器

也叫元素选择器，为页面中某类标签定义样式

p { color:pink }

类选择器

也叫class选择器，用 . 开头进行表示，与id选择器的区别在于可以多次使用，对元素进行归类，定义多个元素的样式

.box { backgroundcolor:pink }

<div class="box"></div>

id选择器

用 # 开头，使用比较局限

通配符选择器

也叫通用选择器，可以选择页面中的所有选择器，有时很方便但不是很推荐，会给浏览器加重负担

* { margin: 0;padding: 0;}

复合选择器

后代选择器

.box .spec :选择类名为box的标签内部的类名为spec的标签

交集选择器

li.spec :选择既是li标签，也属于spec类的标签

并集选择器

ul,ol :选择所有ul和ol标签

高级选择器

链接伪类选择器

a:link a:visited a:hover a:active

focus伪类选择器

input:focus{background-color:green}

新增选择器

属性选择器

[class] fun:选择拥有class属性的元素

[class=“a”] fun: 选择所有class属性值为a的元素

[ class^=“a”] fun: 选择符合条件class以a字符作为开头属性值的元素

[class*=“a”] fun: 选择的是class属性值包含a字符的元素

[class$=“a”] fun: 选择符合条件class以a字符作为结尾属性值的元素

结构伪类选择器

E:first-child 选择的是E的父元素中的第一个孩子并且要求这个孩子是E类型的 如果不是查找失败 如果是成功

E:nth-child(n) n是从0开始的正整数 n>=0 -n+3 前三个 n+6 后几个 2n+1奇数行 2n偶数行

E:last-child 选择的是E的父元素中的最后一个孩子并且要求这个孩子是E类型的 如果不是查找失败 如果是成功

E:first-of-type 匹配E的父元素中的第某个E类型的元素 不会出现失败的情况

E:last-of-type

E:nth-of-type(n)