":first-child" 选择父元素下的第一个子元素。列: ol > li :first-child{color:red;} ol元素中的第一个li元素内容设为红色;
":last-child" 选择父元素的最后一个子元素。列: ul > li :last-child{background:blue;} ul列表中的最后一个li元素背景设为蓝色;
":nth-child(n)" 定位父元素的一个或多个特定的子元素。其中“n”是其参数,而且可以是整数值(1,2,3,4),也可以是表达式(2n+1、-n+5)和关键词(odd、even)。
":nth-last-child(n)" 从父元素的最后一个子元素开始计算,来选择特定的元素。
":first-of-type" 定位父元素下某个类型的第一个子元素。 列: .wrapper > p:first-of-type {background:orange;} 将容器“div.wrapper”中的第一个p元素背景设置为橙色。
":nth-of-type(n)" 定位父元素中某个特定类型的子元素。其中“n”是其参数,而且可以是整数值(1,2,3,4),也可以是表达式(2n+1、-n+5)和关键词(odd、even)。
":last-of-type" 选择父元素下的某个特定类型的最后一个子元素。
":nth-last-of-type(n)" 从最后一个子元素开始,选择父元素中指定的某种子元素类型。
":only-child" 选择器选择的是父元素中只有一个子元素,而且只有唯一的一个子元素。也就是说,匹配的元素的父元素中仅有一个子元素,而且是一个唯一的子元素。
"only-od-type" 是表示一个元素他有很多个子元素,而其中只有一种类型的子元素是唯一的,使用“:only-of-type”选择器就可以选中这个元素中的唯一一个类型子元素。
"::before"和"::after" 这两个主要用来给元素的前面或后面插入内容,这两个常和"content"配合使用,使用的场景最多的就是清除浮动。
列:
.effect::before, .effect::after{ content:""; position:absolute; z-index:-1; -webkit-box-shadow:0 0 20px rgba(0,0,0,0.8); -moz-box-shadow:0 0 20px rgba(0,0,0,0.8); box-shadow:0 0 20px rgba(0,0,0,0.8); top:50%; bottom:0; left:10px; right:10px; -moz-border-radius:100px / 10px; border-radius:100px / 10px; }
上面代码作用在class名叫.effect上的div的前(before)后(after)都添加一个空元素,然后为这两个空元素添加阴影特效。