css中的选择器

CSS基础选择器

标签选择器

div {}

通配符选择器

* { }

类选择器

.eg { }

id选择器

#eg { }

CSS复合选择器

后代选择器

div span { }

子元素选择器

div>span { }

并集选择器

div,span { }

交集选择器

p.one { }  /* 即是p标签且有one类名*/

伪类选择器

a:link { }  /* 链接未访问之前*/
a:visited { } /* 链接访问之后*/
a:hover { } /* 光标移动到链接上*/
a:active { } /* 链接被点击时 */
input:focus { } /*伪类选择器用于选取获得焦点的表单元素*/

属性选择器

选择符	简介
button[name]	选择具有name属性的button元素
button[name="btn"]	选择具有name属性且属性值为btn的button元素
button[name^="btn"]	选择具有name属性且属性值以btn开头的button元素
button[name$="btn"]	选择具有name属性且属性值以btn结尾的button元素
button[name*="btn"]	选择具有name属性且属性值包含btn的button元素

结构伪类选择器

选择符	简介
div :first-child	选择父元素div中第一个子元素
div :last-child	选择父元素div中最后一个子元素
div :nth-child(n)	选择父元素div中第n个子元素
button:first-of-type	选择父元素中指定类型为button的第一个子元素
button:last-of-type	选择父元素中指定类型为button的最后一个元素
button:nth-of-type(n)	选择父元素中指定类型为button的第n个元素

nth-child与nth-of-type

nth-child 选择父元素里面的第几个子元素，不管是第几个类型
nth-of-type 选择指定类型的元素

伪元素选择器

选择符	简介
::before	在元素内部的前面插入内容
::after	在元素内部的前面插入内容

• before 和 after 必须有 content 属性
• before 在内容前面，after 在内容后面
• before 和 after 创建的是一个元素，但是属于行内元素
• 创建出来的元素在 Dom 中查找不到，所以称为伪元素
• 伪元素和标签选择器一样，权重为 1