复合选择器
交集选择器 -->同时选择复合多个条件的元素,有元素选择器,以元素选择器开头。
eg: p.red{ } 选择的是: 类名为 .red 的 段落标签。
并集选择器-->同时选择多个选择器
eg: one, p , #test {color: red;} 选择的是: .one 和 p 和 #test 这三个选择器都会执行
后代选择器 (空格)-->选择指定元素后代的所有元素。
eg: ul li{ }
子选择器 (>)-->选择指定元素子元素的所有元素。
eg: div>p{ }
相邻兄弟选择器 (+)-->选择紧跟在另一个元素后面的元素,且两者拥有相同的父元素
eg: ul+li{ }
通用兄弟选择器 (~)-->选择指定元素的同级元素的所有元素。
eg: div ~ p{ }
伪类选择器:
用来描述一个元素的特殊状态,比如第一个元素,被点击的元素,鼠标移入的元素
一般以:开头
:first-child 第一个子元素
:last-child 第一个子元素
:nth-child(3) 选中第3个元素 n为0开始
伪类是根据所有元素进行排序的
:first-of-type 同类型中的第一个
eg: ul>li:first-of-type
ul>li:not(:nth-child(3){
}
-->出去第三个以外的所有元素
属性选择器
[属性名] { } -->选择含有指定属性的元素
[属性名=属性值] { } -->选择含有指定属性和属性值的元素
[属性名^=属性值] { } -->选择以指定属性值开头的元素
[属性名$=属性值] { } -->选择以指定属性值结尾的元素
[属性名*=属性值] { } -->选择任意部分包含该属性值的元素