CSS3 选择器
基础选择器
- 通配符选择器 *
- ID选择器 #Id
- class选择器 .classname
- 元素选择器 tagName
- 群组选择器 slecter,selecter
层次选择器
- 后代选择器 selecter selecter
- 子元素选择器 selcter>selecter
- 相邻兄弟选择器 selecter+selecter
- 通配兄弟选择器 selecter~selecter
属性选择器
- selecter[attr] 包含attr属性的元素
- selecter[attr=val] attr属性值是val的元素
- seldcter[attr^=val] attr属性值是以val开头的元素
- selecter[attr$=val] attr属性值是以val结束的元素呢
- selecter[attr~=val] attr属性值val 或 包含val（两个值以空格隔开，其中一个是val)
- selecter[*=val] attr属性值中包含val的元素
- selecter[|=val] attr属性值是val或值是 val=*
伪类选择器
-
动态伪类选择器
- :hover
- :link
- :visited
- :active
- :focus
-
目标伪类选择器
- :target
-
语言伪类选择器
- :lang(ch)
-
UI元素伪类选择器
- :enabled 匹配用户界面上处于可用状态的表单元素
- :diabled 匹配用户界面上处于禁止状态的表单元素
- E:checked 匹配用户界面上处于选中状态的元素E。（用于input type为radio与checkbox时）
-
结构伪类选择器
- :root 根元素选择器。在HTML中，根元素 永远是HTML
- E:first-child 匹配父元素的第一个子元素
- :last-child 匹配父元素的最后一个子元素
- nth-child(n) 匹配父元素的第N个子元素E，假设该子元素不是E,则选择符无效
- nth-last-child(n) 匹配父元素的倒数第N个子元素E，假设该子元素不是E,则选择符无效
- only-child 匹配父元素仅有一个子元素E
- first-of-type 匹配同类型中的第一个同级兄弟元素
- last-of-type 匹配同类型中的最后一个同级兄弟元素
- nth-of-type(n) 匹配同类型中第n个同级兄弟元素
- nth-last-of-type() 匹配同类型中倒数第n个同级兄弟元素
- only-of-type() 匹配同类型中唯一一个同级兄弟元素
- empty 匹配空的元素(不能有子元素也不能有内容)
-
否定伪类选择器
- not(selecter)
伪元素选择器
- :first-letter / ::first-letter 第一个字母
- :first-line / ::first-line 第一行
- : before / ::before 设置在对象前发生的内容，用来和content属性一起使用，content后面可跟文字或图片。一般默认加入的内容为行内元素
- : after / ::after 设置在对象后发生的内容，
- ::placeholder 设置对象文字占位符的样式
- ::selection 设置对象被选择时的样式
CSS新增边框属性
圆角
-
border-radius设置或检索对象使用圆角边框。提供2个参数，2个参数以“/”分隔，每个参数允许设置1~4个参数值，第1个参数表示水平半径，第2个参数表示垂直半径，如第2个参数省略，则默认等于第1个参数 水平半径：如果提供全部四个参数值，将按上左(top-left)、上右(top-right)、下右(bottom-right)、下左(bottom-left)的顺序作用于四个角。 如果只提供一个，将用于全部的于四个角。 如果提供两个，第一个用于上左(top-left)、下右(bottom-right)，第二个用于上右(top-right)、下左(bottom-left)。 如果提供三个，第一个用于上左(top-left)，第二个用于上右(top-right)、下左(bottom-left)，第三个用于下右(bottom-right)。 垂直半径也遵循以上4点。 对应的脚本特性为borderRadius。
-
border-top-left-radius
- border-top-right-radius
- border-bottom-left-radius
- border-bottom-right-radius
盒子阴影
- box-shadow:length1,length2,length3,length4,color ,inset
- length1:用来设置对象的阴影水平 偏移值，可以为负值
- length2:用来设置对象的阴影竖直 偏移值，可以为负值
- length3:用来设置对象的阴影模糊值，不可以为负值
- length3:用来设置对象的阴影外延值（阴影宽度），不可以为负值
- color:用来设置阴影颜色
- inset设置对象的阴影对象为外阴影。该值为空时，则对象的阴影类型为外阴影