标签选择器
标签选择器的形式:标签名 { }
标签选择器会选中HTML中的所有同类型的标签,对这些标签进行修改。
后代选择器
后代选择器的形式:父标签名 “空格” 子标签名,空格代表的意思就是后代的意思,空格后的为后代,
后代选择器会选中父标签的后代,这个后代不局限于只能是标签,也可以是类选择器的名称,例如class,
div table tr td p{}
上面这行代码选择的是div标签中的table标签中的tr标签中的td标签中所有的p标签。
看起来很绕,但其实是层层推进的,越靠左则辈分越大,越靠右辈分越小,直到最后的
子标签。
.class1 .class2 .class3 .class4{}
这行代码指的就是类选择器之间的关系,是指从class="class1"开始的父元素,
层层递进选择,直到选中class="class4"的元素。
序选择器
序选择器形式主要有
:first-child 选中同级别中的第一个标签
:last-child 选中同级别中的最后一个标签
:nth-child(n) 选中同级别中的第n个
:nth-last-child(n) 选中同级别中的倒数第n个
:only-child 选中父元素中只有一个子元素的元素
注意点:不区分类型
:first-of-type 选中同级别中同类型的第一个
:last-of-type 选中同级别中同类型的最后一个
:nth-of-type(n) 选中同级别中同类型的第n个
:nth-last-of-type(n) 选中同级别中同类型的倒数第n个
:only-of-type 选中父元素中子元素的类型只有一种的元素